你知道该如何使用 JS 创建 css 类样式吗？

你知道该如何使用 JS 创建 css 类样式吗？

引用

CSDN

1.

https://blog.csdn.net/weixin_42693699/article/details/136476713

在前端开发中，动态创建和管理CSS类样式是一个常见的需求。本文将介绍一种更优雅、更高效的方法——使用CSSStyleSheet API来实现这一功能。

前言

去年我为公司内部开发了一个浏览器插件，当时为了加快开发进度，我没有选用现成的插件框架，而是直接使用原生JavaScript搭配Rollup进行打包。由于这是一个浏览器插件，我不可避免地需要对页面元素进行操作，比如添加按钮、调整颜色等。刚开始，我采取的做法是直接向元素上添加style。这种方法一开始还算可行，但随着插件更新，组件增加，直接添加style变得更加繁琐且不优雅。

例如，手动添加样式的方法如下所示：

function addStyle(container, styles) {
    Object.keys(styles).forEach((key)=>{
        container.style[key] = styles[key]
    })
}
const divEle = document.createElement('div')
addStyle(divEle, {
    color: 'white',
    backgroundColor: '#333'
})

这种情况下，我开始思考是否有更为合适的方法可以通过JavaScript动态创建类样式。当时由于时间紧迫以及不影响功能性，我没有再去深入研究。今天，我将分享一种优雅的方法——使用CSSStyleSheet添加css类样式。

传统添加类样式

通常，如果需要通过JavaScript动态添加新的类样式，我们会操作