Hướng dẫn add style javascript - thêm phong cách javascript

Tóm tắt: Trong hướng dẫn này, bạn sẽ học cách thêm các kiểu vào một phần tử bằng các phương thức JavaScript DOM.: in this tutorial, you’ll learn how to add styles to an element using JavaScript DOM methods.: in this tutorial, you’ll learn how to add styles to an element using JavaScript DOM methods.

Nội dung chính ShowShow

• Phong cách nội tuyến
• 1) Sử dụng thuộc tính CSStext
• 2) Sử dụng hàm trợ giúp
• Phong cách toàn cầu
• Nhận giá trị của biên giới hàng đầu "MYP":
• Thuộc tính style trả về một đối tượng note.style.cssText += 'color:red;background-color:yellow';Code language: JavaScript (javascript)2.
• Đặt thuộc tính kiểu:
• Đặt thuộc tính kiểu:
• Làm cách nào để tạo kiểu cho một yếu tố trong JavaScript?
• Làm thế nào để bạn thêm một phong cách vào một yếu tố?
• Tôi có thể tạo kiểu cho phần tử HTML không?
• Bạn có thể thêm phong cách vào Div không?

Giả sử rằng bạn có 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 các kiểu vào yếu tố này. Bằng cách sử dụng các phương thức DOM JavaScript, bạn có thể thêm các kiểu nội tuyến hoặc kiểu toàn cầu vào phần tử.

Phong cách nội tuyến

Để thêm các 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ử đã 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 thành phần tử.
• Sau đó, đặt các giá trị của các 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)

  6.

Mã sau đây 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

2) 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)

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

Phong cách toàn cầu

2) Sử dụng hàm trợ giúp

Phong cách toàn cầu

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

function css(element, style) {
    for (const property in style)
        element.style[property] = style[property];
}
Code language: JavaScript (javascript)

Nhận giá trị của biên giới hàng đầu "MYP":

Phong cách toàn cầu

Nhận giá trị của biên giới hàng đầu "MYP":

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

Thuộc tính style trả về một đối tượng note.style.cssText += 'color:red;background-color:yellow';Code language: JavaScript (javascript)2.