js如何添加css

在 JavaScript 中，有以下几种方法可以动态添加 CSS：

1. 使用 DOM API 创建和插入 style 元素

```javascript
 const css = '.my-class { color: red; }';
 const $style = document.createElement('style');
 $style.type = 'text/css';
 $style.textContent = css;
 document.head.appendChild($style);
```

上述代码中，我们使用 `createElement()` 方法创建 `style` 元素，同时使用 `type` 属性指定元素类型。使用 `textContent` 属性将 CSS 代码添加到元素中，并将元素添加到头部 `head` 元素中。

2. 直接将 CSS 代码添加到 HTML 标记中

```javascript
 const css = '.my-class { color: red; }';
 document.write(`<style type='text/css'>${css}</style>`);
```

此方法将 CSS 代码作为字符串插入到 HTML 文档的 body 部分。注意，这种方法不推荐使用，因为可能会导致 Cross-Site Scripting（XSS）攻击等安全性问题。

3. 使用 CSSStyleSheet API 创建和插入 CSS

```javascript
 const css = '.my-class { color: red; }';
 const sheet = new CSSStyleSheet();
 sheet.replaceSync(css);
 document.adoptedStyleSheets = [sheet];
```

此方法需要最新版本的浏览器支持，并使用了新的 CSSStyleSheet API。我们先使用 `new CSSStyleSheet()` 创建样式表对象，然后使用 `replaceSync()` 方法插入 CSS 代码。最后，将样式表对象添加到 `adoptedStyleSheets` 中即可。

需要注意的是，在动态添加 CSS 时，应该谨慎处理样式的选择器以及整个 CSS 样式的作用范围，不能影响到已有的样式布局。另外，在样式表多次添加时，也需要注意去重和清除旧样式表的问题。

希望这些方法对你有所帮助。如果你还有其他问题，请随时提问。