Hướng dẫn add style to element javascript - thêm kiểu vào phần tử 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.

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

như sau:

<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ư document.querySelector(). Phần tử đã chọn có thuộc tính style 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 style.

Mã sau đây thay đổi màu nền và màu của phần tử

ở 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 nhiều kiểu đặt 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 hàm trợ giúp

Hàm trợ giúp sau đây chấp nhận một yếu tố và một đối tượng kiểu. Nó thêm tất cả các kiểu từ đối tượng style vào thuộc tính style của

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

Code language: JavaScript (javascript)
7:

function css(element, style) { for (const property in style) element.style[property] = style[property]; }

Code language: JavaScript (javascript)

Và bạn có thể sử dụng chức năng trợ giúp

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

Code language: JavaScript (javascript)
8 này để đặt các kiểu cho phần tử
như sau:

const note = document.querySelector('.note'); css(note, { 'background-color': 'yellow', 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 yếu tố, bạn tạo phần tử kiểu, điền vào nó bằng các quy tắc CSS và nối phần tử kiểu vào cây Dom, như thế này:

const style = document.createElement('style'); style.innerHTML = ` .note { background-color: yellow; color:red; } `; document.head.appendChild(style);

Code language: JavaScript (javascript)

Hướng dẫn này có hữu ích không?

Ví dụ

Thay đổi màu của "MyH1":

document.getEuityById ("myh1"). style.color = "red";

Hãy tự mình thử »

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

let value = document.getEuityById ("myp"). style.bandertop;

Hãy tự mình thử »


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

let value = document.getEuityById ("myp"). style.bandertop;

Định nghĩa và cách sử dụng

Thuộc tính style trả về các giá trị của thuộc tính kiểu phần tử.



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.

Đối tượng

note.style.cssText += 'color:red;background-color:yellow';

Code language: JavaScript (javascript)
2 chứa tất cả các thuộc tính kiểu nội tuyến cho phần tử. Nó không chứa bất kỳ thuộc tính phong cách nào được đặt trong phần hoặc trong bất kỳ bảng kiểu bên ngoài nào.

Cú pháp

Trả lại một thuộc tính kiểu:

Đặt thuộc tính kiểu:

phần tử.style.property = valueGiá trị trả lại
Loại hìnhSự mô tả

giá trị
element.style.borderBottom = "2px solid red"

Đặt thuộc tính kiểu:

phần tử.style.property = valueGiá trị trả lại
Loại hìnhSự mô tả

giá trị

Giá trị của thuộc tính được chỉ định.

Ví dụ: Element.Style.borderBottom = "2px Solid Red"

Sự vậtĐối tượng CssStyleClaring của phần tử.Hỗ trợ trình duyệt

note.style.cssText += 'color:red;background-color:yellow';

Code language: JavaScript (javascript)
4 là tính năng DOM Cấp 2 (2001).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:Trình duyệt Chrome
I EBờ rìaI EI EI EI E


Làm cách nào để tạo kiểu cho một yếu tố trong JavaScript?

Làm thế nào để tạo kiểu cho các yếu tố DOM bằng JavaScript..
const phần tử = tài liệu.QuerySelector ('#My-Strement') Bạn có thể sử dụng thuộc tính danh sách lớp của một phần tử và các phương thức bổ sung () và xóa ():.
Danh sách lớp.thêm ('myClass') phần tử.Danh sách lớp.....
Phong cách.color = '#fff' Bạn có thể thay đổi đường viền:.
Phong cách.Border = '1px Solid Black'.

Làm thế nào để bạn thêm một phong cách vào một yếu tố?

Để thêm các kiểu nội tuyến vào một yếu 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ư tài liệu.Truy vấnSelector ().Phần tử đã chọn có thuộc tính kiểu 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 kiểu ..

Tôi có thể tạo kiểu cho phần tử HTML không?

Thuộc tính kiểu là một phần của các thuộc tính toàn cầu và có thể được sử dụng trên bất kỳ phần tử HTML nào.can be used on any HTML element.

Bạn có thể thêm phong cách vào Div không?

Để chỉ định kích thước, màu sắc và các thuộc tính khác của một phần tử, bạn có thể gán các quy tắc kiểu CNTT bằng CSS.you can assign it style rules using CSS.