Nhận kiểu của phần tử 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]

4 như sau

JavaScript CSS
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]

4 ở trên

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]

2

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]

3 để nối các kiểu mới vào các kiểu hiện có. Nếu bạn sử dụng toán tử

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

4, kiểu hiện tại sẽ bị xóa, như thế này

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]

0 vào thuộc tính

const note = document.querySelector['.note'];
note.style.backgroundColor = 'yellow';
note.style.color = 'red';

  

Code language: JavaScript [javascript]

0 của

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

7

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

1

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]

8 này để đặt kiểu cho phần tử

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

4 như sau

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

3

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 để có kiểu phần tử trong JavaScript?

Làm cách nào để có được kiểu phần tử CSS trong JavaScript?

Làm cách nào để có kiểu nội tuyến bằng JavaScript?

Phong cách của phần tử là gì?