Các trang phát triển thường được tạo kiểu bằng các tệp CSS. Nếu bạn truy cập mã nguồn của trang web, bạn có thể thấy rằng về cơ bản nó chứa ít nhất một tệp kiểu. Các tệp CSS phù hợp để xử lý các bản trình bày không yêu cầu tương tác. Nếu bạn cần thay đổi cách hiển thị của các thành phần trên trang theo hành vi của người dùng, bạn cần dựa vào JavaScript để thay đổi kiểu của các thành phần. Sau đây sẽ giới thiệu 4 cách để thiết lập kiểu CSS thông qua JavaScript
Đặt một kiểu CSS duy nhấtMỗi phần tử dom sẽ có một thuộc tính style
, là một đối tượng JavaScript. Thông qua đối tượng style
, bạn có thể lấy hoặc đặt kiểu do người dùng đặt
Giả sử rằng màu nền của trang là màu trắng, kiểu ban đầu được đặt cho trang thông qua tệp CSS là
body { background-color: #000;}
Nếu chúng ta cần sửa đổi màu nền của trang thành màu đỏ, chúng ta có thể làm điều đó bằng cách sử dụng đối tượng style
theo các cách sau
document.body.style.backgroundColor = '#f00';
Trông đơn giản vậy thôi nhưng bỗng một ngày bạn phát hiện bộ style không có tác dụng. Bạn thật thông minh, bạn đã phát hiện ra sự cố khi mở devtools của chrome, tệp kiểu CSS gốc đã bị ai đó sửa đổi
body { background-color: #000 !important;}
Mức độ ưu tiên của kiểu do Javascript đặt không đủ, khiến kiểu không thành công. Vậy có cách nào để giải quyết vấn đề này không?
Tất nhiên, đối tượng style
cũng cung cấp API để đặt kiểu
element.style.setProperty[propertyName, value?, priority?];
Tham số thứ ba là đặt mức độ ưu tiên CSS, có thể là
document.body.style.backgroundColor = '#f00';
3, chuỗi rỗng, không xác định. Vì vậy, chúng ta có thể sử dụng nó để đặt kiểu CSSdocument.body.style.setProperty['background-color', '#f00', 'important' ];
Thật tuyệt, trang hiển thị bình thường trở lại. Nhưng sẽ có những thay đổi mới sắp tới, không chỉ cần thay đổi màu nền của trang mà còn cần thay đổi màu chữ và lề, vì vậy bạn có thể nghĩ ngay đến
document.body.style.backgroundColor = '#f00';document.body.style.color = '#0f0';document.body.style.margin = '20px';
Điều này rất khó để duy trì khi ngày càng có nhiều phong cách được thay đổi. Có cách nào để đặt thuộc tính theo đợt không?
Đặt kiểu CSS theo đợtĐối tượng style
cung cấp thuộc tính
document.body.style.backgroundColor = '#f00';
5 hỗ trợ thiết lập nhiều kiểu CSSNếu bạn cần sửa đổi màu nền của trang, đồng thời thay đổi màu phông chữ và lề, bạn có thể sử dụng nó
Tất nhiên, bạn cũng có thể đặt mức độ ưu tiên của thuộc tính giống như trong tệp CSS
document.body.style.cssText = "background-color: #f00 !important; color: #0f0; margin: 20px;";
Một ý tưởng khác là tự động chèn các tệp kiểu bằng cách xây dựng thẻ kiểu của html. Và bọc kiểu CSS cần sửa đổi dưới dạng lớp CSS
function styleInject[cssText] { const head = document.head || document.getElementsByTagName['head'][0]; const style = document.createElement['style']; style.type = 'text/css'; style.appendChild[document.createTextNode[cssText]]; head.appendChild[style];}
// insert the css styles
styleInject[`
body {
background-color: #f00 !important;
color: #0f0;
margin: 20px;
}
`];
Đây là cách chèn file CSS động, cũng được dùng trong Webpack
Phần kết luậnNếu bạn cần dùng JavaScript để sửa style của một phần tử thì có 4 cách, bạn đã nắm hết chưa
1. yếu tố. phong cách [tên thuộc tính] = giá trị
2. yếu tố. Phong cách. setProperty[propertyName, value, priority]
3. yếu tố. Phong cách. cssText = valueString
4. động chèn thẻ kiểu html
Nếu đó là một sửa đổi kiểu CSS duy nhất, bạn nên sử dụng hai kiểu đầu tiên. Nếu cần sửa đổi hàng loạt, nên sử dụng hai cái sau
Như bạn có thể thấy trong devtools của Chrome, thẻ trống, nhưng kiểu [màu xanh biển đậm] được áp dụng cho phần tử. Ngoài ra, không thể thay đổi màu qua devtools vì Chrome không cho phép chỉnh sửa các kiểu CSS động
Trên thực tế hành vi như vậy là động lực để viết bài này. Một thư viện CSS-in-JS phổ biến Các thành phần được tạo kiểu sử dụng tính năng này để thêm các kiểu trong chế độ sản xuất vì hiệu suất. Tính năng này có thể không được mong muốn trong các dự án hoặc môi trường cụ thể và một số người phàn nàn về nó trong các sự cố của dự án