Bạn có thể tạo kiểu javascript bằng css không?

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ất

Mỗ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 CSS

document.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 CSS
Nế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ó

________số 8_______

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ận

Nế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ẻ