Trong hướng dẫn này, hãy tìm hiểu cách jQuery thêm thuộc tính vào phần tử HTML. Câu trả lời ngắn gọn là. sử dụng phương thức jQuery attr[]
. Bạn có thể sử dụng phương pháp này để thêm các thuộc tính vào phần tử HTML với giá trị thuộc tính có liên quan của nó
Nếu bạn muốn tìm hiểu thêm về phương thức jQuery attr, bạn phải truy cập trang phương thức jQuery attr[] để tìm hiểu cú pháp và biết thêm chi tiết
Cách jQuery thêm thuộc tính vào phần tử HTML
Để thêm thuộc tính vào phần tử HTML bằng jQuery, bạn phải sử dụng phương thức jQuery attr[]
với tên thuộc tính và giá trị liên quan cho thuộc tính
Hãy cùng tìm hiểu cách thêm thuộc tính lớp với ví dụ dưới đây. Xem ví dụ dưới đây để tìm hiểu phương pháp và thêm thuộc tính. -
Thêm thuộc tính lớp
Ví dụ
XHTML1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.myclass{
nền. #ccc;
màu. đỏ;
phần đệm. 5px
}
$[tài liệu]. sẵn sàng[chức năng[]{
$["#btn-addattr"] . .nhấp chuột[chức năng[]{
$["#para-addattr"] . .attr["lớp","myclass"];
}];
}];
This is the answer to add attributes to an HTML element using jQuery attr[] method.
đầu ra
Thêm thuộc tính
Đây là câu trả lời để thêm thuộc tính vào phần tử HTML bằng phương thức jQuery attr[]
The above example adds a class attribute to the HTML
tag. The method adds the class attribute to the HTML element as well the styling of the specified class.
Bạn có thể nhấp vào nút 'Thêm thuộc tính' được cung cấp ở trên để xem lớp được thêm vào thành phần đoạn văn
Có một số cách để áp dụng thuộc tính CSS cho một phần tử bằng JavaScript và jQuery. Tất cả các lựa chọn thay thế này trực tiếp hoặc gián tiếp nhắm mục tiêu thuộc tính toàn cầu style
, thuộc tính này chứa các khai báo kiểu dáng CSS cho phần tử
1. Sử dụng jQuery – phương thức .css[]
Trong jQuery, bạn có thể sử dụng . css[] phương pháp thiết lập một hoặc nhiều thuộc tính CSS trên một phần tử. Nó hoạt động bằng cách sửa đổi giá trị của thuộc tính style
của phần tử.
JS
1
2
3
$[tài liệu]. sẵn sàng[chức năng[] {
$["#container"].css["background-color", "lightgray"];
}];
HTML
1
Chỉnh sửa trong JSFiddle
Phiên bản trên của phương thức .css[]
lấy tên và giá trị thuộc tính làm tham số riêng biệt. Để thêm nhiều thuộc tính CSS trong một dòng, bạn có thể chuyển một đối tượng gồm các cặp khóa-giá trị cho phương thức .css[]
, như minh họa bên dưới.
JS
1
2
3
4
5
6
7
$[tài liệu]. sẵn sàng[chức năng[] {
$["#container"].css[{
"màu nền". "xám nhạt",
"chiều rộng". "500px",
"chiều cao". "300px"
}];
}];
HTML
1
Chỉnh sửa trong JSFiddle
2. Sử dụng JavaScript – thuộc tính style
Trong JavaScript thuần túy, bạn có thể sử dụng thuộc tính kiểu để đặt kiểu nội tuyến của một phần tử. Vui lòng tham khảo bài viết này để biết danh sách các thuộc tính CSS phổ biến tương đương với JavaScript