Bài viết này sẽ mô tả các phương pháp để thêm CSS bằng JavaScript.
Làm cách nào để thêm CSS bằng JavaScript?
Trong JavaScript, bạn có thể thêm các kiểu CSS vào một phần tử bằng cách sửa đổi thuộc tính kiểu của nó bằng các phương pháp hoặc cách tiếp cận sau:
- phong cách Thuộc tính như phong cách nội tuyến
- setAttribute() Phương thức dưới dạng kiểu dáng nội tuyến
- phương thức createElement() dưới dạng kiểu toàn cầu
Phương pháp 1: Thêm CSS bằng JavaScript Sử dụng thuộc tính “style”
Để thêm CSS trong JavaScript, hãy sử dụng “ phong cách ' tài sản. Nó được sử dụng để truy cập và thao tác các kiểu nội tuyến của một phần tử. Nó cung cấp một đối tượng đại diện cho các kiểu nội tuyến của một phần tử và cho phép một đối tượng lấy hoặc đặt các thuộc tính kiểu riêng lẻ.
cú pháp
Để thêm kiểu CSS trong JavaScript, cú pháp sau được sử dụng cho “ phong cách ' tài sản:
yếu tố. phong cách ;
Đây, ' yếu tố ” là tham chiếu đến phần tử HTML.
Ví dụ
Trong ví dụ sau, chúng tôi sẽ tạo kiểu cho các nút bằng JavaScript. Đầu tiên, chúng tôi sẽ tạo ba nút và gán id cho chúng, giúp truy cập các thành phần nút để tạo kiểu:
< id nút = 'btn2' > Từ chối cái nút >
< id nút = 'btn3' > Chấp nhận cái nút >
Trước khi tạo kiểu, đầu ra sẽ trông như thế này:
Bây giờ, hãy tạo kiểu cho các nút này trong JavaScript bằng cách sử dụng “ phong cách ' tài sản. Đầu tiên, lấy tất cả các thành phần của nút bằng cách sử dụng id được chỉ định của chúng với sự trợ giúp của “ getElementById() ' phương pháp:
hãy đồng ý = tài liệu. getElementById ( 'btn1' ) ;hãy từ chối = tài liệu. getElementById ( 'btn2' ) ;
hãy chấp nhận = tài liệu. getElementById ( 'btn3' ) ;
Đặt màu nền của tất cả các nút này bằng nút “ phong cách ' tài sản:
đồng ý. phong cách . màu nền = 'màu xanh lá' ;từ chối. phong cách . màu nền = 'màu đỏ' ;
chấp nhận. phong cách . màu nền = 'màu vàng' ;
Như bạn có thể thấy, các nút đã được tạo kiểu thành công bằng cách sử dụng “ phong cách ' tài sản:
Phương pháp 2: Thêm CSS bằng JavaScript bằng phương thức “setAttribute()”
Để thêm kiểu dáng CSS trong JavaScript, hãy sử dụng “ setAttribute() ' phương pháp. Nó được sử dụng để đặt hoặc thêm một thuộc tính và giá trị của nó vào một phần tử HTML.
cú pháp
Cú pháp sau đây được sử dụng cho “ setAttribute() ' phương pháp:
Ví dụ
Ở đây, chúng tôi sẽ đặt các kiểu khác nhau cho các nút trong JavaScript bằng cách sử dụng “ setAttribute() ' phương pháp. Đặt bán kính đường viền của tất cả các nút thành “ .5rem ” và màu văn bản của “ Đồng ý ' Và ' Từ chối ” nút để “ trắng ”.
từ chối. setAttribute ( 'phong cách' , 'màu nền: đỏ; màu: trắng; bán kính đường viền: .5rem;' ) ;
chấp nhận. setAttribute ( 'phong cách' , 'màu nền: vàng; bán kính đường viền: .5rem;' ) ;
đầu ra
Phương pháp 3: Thêm CSS bằng JavaScript bằng phương thức “createElement()”
Nếu bạn muốn tạo các lớp hoặc id theo kiểu JavaScript như trong kiểu CSS, hãy sử dụng “ tạo phần tử () ' phương pháp. Nó được sử dụng để tự động tạo một phần tử mới. Để tạo kiểu, hãy tạo một “ phong cách ” phần tử sử dụng phương pháp này. Các ' createElement('phong cách') ” phương thức trong JavaScript được sử dụng để tự động tạo một phần tử kiểu mới, có thể được sử dụng để thêm các kiểu CSS vào trang web.
cú pháp
Cú pháp đã cho được sử dụng cho “ tạo phần tử () ' phương pháp:
Để thêm kiểu CSS trong JavaScript, hãy sử dụng cú pháp đã cho:
hằng số phong cách = tài liệu. tạo phần tử ( 'phong cách' ) ;Sau đó, thêm phần tử kiểu vào thẻ đầu bằng cú pháp bên dưới:
tài liệu. cái đầu . nối thêmTrẻ em ( phong cách ) ;Đây, ' phong cách ” là tham chiếu đến phần tử kiểu mới được tạo và “ tài liệu.head ” là phần tử đầu của tài liệu HTML.
Ví dụ
Đầu tiên, tạo một yếu tố phong cách bằng cách sử dụng “ tạo phần tử () ' phương pháp:
Bây giờ, hãy tạo một “ btn ” lớp để áp dụng cùng một kiểu trên tất cả các nút và id “ btn1 ”, “ btn2 ' Và ' btn3 ” để tạo kiểu nút riêng lẻ:
phong cách. bên trongHTML = `. btn {
nét chữ - kích cỡ : 1.1rem ;
đệm : 3px ;
lề : 2px ;
nét chữ - gia đình : không có - có chân ;
ranh giới - bán kính : .5rem ;
}
#btn1 {
lý lịch - màu sắc : màu xanh lá ;
màu sắc : trắng ;
}
#btn2 {
lý lịch - màu sắc : màu đỏ ;
màu sắc : trắng ;
}
#btn3 {
lý lịch - màu sắc : màu vàng ;
}
` ;
Bây giờ, hãy nối phần tử kiểu vào phần đầu của tài liệu bằng cách chuyển dưới dạng tham số cho “ appendChild() ' phương pháp:
tài liệu. cái đầu . nối thêmTrẻ em ( phong cách ) ; đầu ra
Đó là tất cả về việc thêm CSS vào JavaScript.
Phần kết luận
Để thêm CSS bằng JavaScript, hãy sử dụng kiểu dáng nội tuyến bao gồm “ phong cách ” Tài sản, và “ setAttribute() ” phương thức hoặc kiểu dáng toàn cầu bằng cách sử dụng “ tạo phần tử () ' phương pháp. Kiểu toàn cầu hiệu quả hơn trong khi phương pháp nội tuyến không được khuyến nghị vì nó gây khó khăn cho việc duy trì kiểu ứng dụng và có thể dẫn đến lặp lại mã. Bài viết này đã mô tả các phương pháp để thêm CSS bằng JavaScript.