如何获取ID为customStylesheet的样式表并使用CSSStyleSheet.insertRule()添加类？

别发愁，这事儿其实挺简单的！咱们一步步来解决：

第一步：获取目标样式表对象 #

你已经给样式表设置了ID为customStylesheet，那直接通过DOM获取对应的<link>或<style>元素，然后取它的sheet属性就能拿到CSSStyleSheet对象了。代码示例：

// 先拿到样式表对应的DOM元素
const styleElement = document.getElementById('customStylesheet');
// 再获取样式表对象
const targetStyleSheet = styleElement.sheet;

不管你的样式表是通过<link rel="stylesheet">引入的外部文件，还是<style>标签里的内联样式，只要ID正确，这个方法都管用。

第二步：用insertRule()插入新类 #

拿到样式表对象后，就可以调用insertRule()来添加新的CSS类了。第一个参数是完整的CSS规则文本，第二个参数是插入的位置（可选，默认插入到规则列表的开头，也就是0）。比如我们插入一个高亮文本的类：

// 插入新类规则
targetStyleSheet.insertRule('.highlight-text { background-color: yellow; padding: 2px 4px; }', 0);

关于文档里提到的“所有者对象” #

文档说的“所有者对象”其实是指样式表的关联对象：

• 如果你的样式表是通过CSS的@import规则导入的，那它的ownerRule属性会是一个CSSImportRule对象；
• 如果是通过DOM里的<link>或<style>元素创建的，那它的ownerNode属性就是对应的DOM元素（也就是咱们第一步拿到的styleElement）。不过在你的场景里，直接通过ID拿元素再取sheet是最直接的方式，不用绕到所有者对象那里去。

注意事项 #

• 要是样式表是跨域加载的（比如用了CDN的外部样式），浏览器的安全策略会阻止你修改它，这种情况只能改用内联样式表或者同域的样式表哦。

内容的提问来源于stack exchange，提问作者user1734974