Cách thêm thuộc tính vào lớp css bằng jquery

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ụ

1

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");

    });

});

id="btn-addattr" id="btn-addattr">Add Attribute

id="para-addattr" .

đầu ra

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