Làm cách nào để đặt kiểu CSS trong JavaScript?

Tóm lược. trong hướng dẫn này, bạn sẽ học cách thêm kiểu vào phần tử bằng các phương thức DOM của JavaScript

Giả sử rằng bạn có một phần tử

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

<div class="note">JavaScript CSSdiv>
Code language: HTML, XML (xml)

Và bạn muốn thêm phong cách cho phần tử này. Bằng cách sử dụng các phương thức JavaScript DOM, bạn có thể thêm kiểu nội tuyến hoặc kiểu toàn cục vào phần tử

kiểu nội tuyến

Để thêm kiểu nội tuyến vào một phần tử, bạn làm theo các bước sau

• Đầu tiên, chọn phần tử bằng cách sử dụng các phương thức DOM như

  const note = document.querySelector('.note');
  note.style.backgroundColor = 'yellow';
  note.style.color = 'red';
  
  
  
  Code language: JavaScript (javascript)

  5. Phần tử được chọn có thuộc tính

  const note = document.querySelector('.note');
  note.style.backgroundColor = 'yellow';
  note.style.color = 'red';
  Code language: JavaScript (javascript)

  6 cho phép bạn đặt các kiểu khác nhau cho phần tử
• Sau đó, thiết lập các giá trị thuộc tính của đối tượng

  const note = document.querySelector('.note');
  note.style.backgroundColor = 'yellow';
  note.style.color = 'red';
  Code language: JavaScript (javascript)

  0

Đoạn mã sau thay đổi màu nền và màu của phần tử

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

1) Sử dụng thuộc tính cssText

Thêm phong cách cá nhân là khá dài dòng. May mắn thay, bạn có thể thêm tập hợp nhiều kiểu cùng một lúc bằng cách sử dụng thuộc tính

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

note.style.cssText += 'color:red;background-color:yellow';
Code language: JavaScript (javascript)

Trong ví dụ này, chúng tôi đã sử dụng toán tử

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

note.style.cssText = 'color:red;background-color:yellow';
Code language: JavaScript (javascript)

2) Sử dụng chức năng trợ giúp

Hàm trợ giúp sau chấp nhận một phần tử và một đối tượng kiểu. Nó thêm tất cả các kiểu từ đối tượng

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';



Code language: JavaScript (javascript)

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

Và bạn có thể sử dụng hàm trợ giúp

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
Code language: JavaScript (javascript)

phong cách toàn cầu

Để thêm các kiểu toàn cầu vào một phần tử, bạn tạo phần tử kiểu, điền vào đó các quy tắc CSS và nối phần tử kiểu vào cây DOM, như thế này

Làm cách nào để đặt kiểu CSS trong hàm JavaScript?

Làm cách nào để đặt giá trị CSS trong JavaScript?

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