在JS里面怎么寫CSS樣式

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

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

可以通過創(chuàng)建style標簽來添加樣式表，然后將樣式規(guī)則添加到該標簽中。

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

2、操作樣式規(guī)則

可以通過styleSheet屬性來獲取樣式表，然后添加、修改或刪除樣式規(guī)則。

var styleSheet = document.styleSheets[0]; // 獲取***個樣式表
var rule = styleSheet.insertRule('.my-class { color: red; font-size: 16px; }', 0); // 在***個位置插入樣式規(guī)則
console.log(rule); // 打印插入的樣式規(guī)則

3、應用樣式類

可以通過操作元素的className屬性來添加或刪除樣式類。

var element = document.getElementById('my-element'); // 獲取元素
element.className += ' my-class'; // 添加樣式類

4、內(nèi)聯(lián)樣式

可以直接在HTML元素上設置style屬性來應用樣式。

var element = document.getElementById('my-element'); // 獲取元素
element.style.color = 'red'; // 設置顏色為紅色
element.style.fontSize = '16px'; // 設置字體大小為16像素

操作可能會影響頁面的渲染性能，因此應謹慎使用，為了確保樣式的正確應用，建議在操作樣式之前先確保元素已經(jīng)存在于DOM中。