在JS中寫CSS樣式的方法

在JS中寫CSS樣式，可以通過操作DOM（文檔對(duì)象模型）來實(shí)現(xiàn)，以下是一些常見的操作：

1、創(chuàng)建樣式表

可以通過document.createElement('style')方法創(chuàng)建一個(gè)樣式表元素，然后向其中添加CSS規(guī)則。

var styleSheet = document.createElement('style');
styleSheet.innerHTML = `
  .my-class {
    color: red;
    font-size: 16px;
  }
`;
document.head.appendChild(styleSheet);

2、操作樣式表

可以通過document.styleSheets屬性獲取樣式表列表，然后遍歷列表對(duì)樣式表進(jìn)行操作。

var styleSheet = document.styleSheets[0]; // 獲取***個(gè)樣式表
var cssRules = styleSheet.cssRules || styleSheet.rules; // 獲取樣式表中的CSS規(guī)則
for (var i = 0; i < cssRules.length; i++) {
  var rule = cssRules[i]; // 遍歷規(guī)則
  // 可以對(duì)規(guī)則進(jìn)行操作，例如修改或刪除規(guī)則
}

3、添加樣式規(guī)則

可以通過Element.style屬性添加樣式規(guī)則。

var element = document.getElementById('my-element'); // 獲取元素
element.style.color = 'red'; // 添加樣式規(guī)則
element.style.fontSize = '16px'; // 添加樣式規(guī)則

4、使用CSSStyleSheet接口

CSSStyleSheet接口提供了一種更簡(jiǎn)潔的方式來操作樣式表。

var styleSheet = new CSSStyleSheet(); // 創(chuàng)建樣式表
styleSheet.insertRule(`
  .my-class {
    color: red;
    font-size: 16px;
  }`, 0); // 插入規(guī)則，0表示規(guī)則的位置索引
document.head.appendChild(styleSheet); // 添加樣式表到文檔中

這些是在JS中寫CSS樣式的一些常見方法，通過掌握這些方法，你可以更靈活地控制網(wǎng)頁(yè)的樣式和布局。