Phong cách trong javascript là gì?

Thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 được sử dụng để lấy cũng như đặt kiểu nội tuyến của phần tử DOM bằng các thuộc tính CSS khác nhau. Nó trả về một đối tượng

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

4, chứa danh sách tất cả các thuộc tính CSS được xác định trong thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 của phần tử

Thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 cực kỳ hữu ích để tự động thay đổi biểu diễn trực quan của phần tử HTML bằng JavaScript. Bạn có thể đặt gần như tất cả các kiểu cho các thành phần như màu sắc, phông chữ, căn chỉnh văn bản, lề, đường viền, hình nền, kích thước, v.v. Kiểu nội tuyến được áp dụng trực tiếp cho phần tử HTML bằng cách sử dụng thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 mà không có bất kỳ ảnh hưởng nào đến các phần tử liền kề

cú pháp

Để truy cập thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3, bạn có thể sử dụng phương thức

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

1 như hình bên dưới

const elem = document.getElementById['sidebar'];
 
// get CSS property
console.log[elem.style.display];

// set CSS property
elem.style.display = 'block';

Hãy xem hướng dẫn này để tìm hiểu về các phương pháp khác nhau để truy cập các phần tử DOM trong JavaScript

ví dụ

Ví dụ sau minh họa cách thay đổi thuộc tính CSS màu sắc và phông chữ của phần tử HTML với

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

2 bằng cách sử dụng thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

Đoạn mã trên sẽ thay đổi màu văn bản của phần tử HTML thành màu xanh lam, in đậm và đặt kích thước phông chữ thành

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

4

Bạn không thể đặt thuộc tính CSS bằng cách gán trực tiếp chuỗi cho thuộc tính kiểu

// set property directly [wrong]
elem.style = 'color: blue'; 

Thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 chỉ sẵn sàng vì thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 trả về đối tượng

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

4 chỉ đọc. Thay vào đó, bạn có thể sử dụng thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 để đặt hoặc nhận thuộc tính CSS riêng lẻ. Tốt hơn là bạn nên sử dụng thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 để đặt các kiểu cụ thể cho một phần tử HTML mà không thay đổi các giá trị kiểu khác

Để ghi đè hoàn toàn các kiểu nội tuyến hiện có cho một phần tử, thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 cung cấp thuộc tính

// set property directly [wrong]
elem.style = 'color: blue'; 

1

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

Ngoài ra, bạn có thể sử dụng phương thức

// set property directly [wrong]
elem.style = 'color: blue'; 

2 của phần tử để chỉ định giá trị thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3

elem.setAttribute['style', 'color: blue; font-weight: bold; font-size: 18px'];

Hãy xem hướng dẫn này để tìm hiểu tất cả các thuộc tính CSS có thể truy cập bằng thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3

Ghi chú. Thuộc tính

const elem = document.getElementById['about'];
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

3 chỉ hữu ích để lấy các quy tắc kiểu được đặt trong các thuộc tính nội tuyến của phần tử ________ 23. e. g.

// set property directly [wrong]
elem.style = 'color: blue'; 

7 chứ không phải những thứ đến từ nơi khác, chẳng hạn như quy tắc kiểu được xác định bằng cách sử dụng các phần tử

// set property directly [wrong]
elem.style = 'color: blue'; 

8 hoặc biểu định kiểu bên ngoài

quy ước đặt tên

Như bạn có thể thấy ở trên, cách đặt thuộc tính CSS của JavaScript hơi khác so với CSS. Nhiều thuộc tính CSS chứa dấu gạch ngang [_______59] trong tên của chúng, chẳng hạn như

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

0,

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

1,

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

2, v.v. Vì dấu gạch nối là toán tử dành riêng và được hiểu là dấu trừ trong JavaScript, nên không thể sử dụng dấu gạch nối trong biểu thức. e. g.

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

3

Do đó, trong JavaScript, tên thuộc tính CSS nằm trong trường hợp lạc đà. Các dấu gạch nối được loại bỏ và chữ cái ngay sau mỗi dấu gạch nối được viết hoa. Ví dụ: thuộc tính CSS

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

1 trở thành thuộc tính DOM

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

5,

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

6 trở thành

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

7,

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

8 trở thành

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

9, v.v.

Tôi có thể sử dụng kiểu trong JavaScript không?

Phương pháp phong cách là gì?

Thẻ phong cách được sử dụng để làm gì?

Phong cách như một yếu tố là gì?