document.stylesheets

document.styleSheets

只读属性,返回一个由 StyleSheet对象组成的数组,每个StyleSheet对象都是一个文档中链接或嵌入的样式表。
StyleSheet对象具有cssRules属性,是一个数组,同一个style中的每一条样式都是数组中的一项CSSStyleRuleCSSKeyframeRule等,并具有cssText等属性。其中CSSStyleRule对象的selectorTextstyle属性可修改。

var cssRule = document.styleSheets[0].cssRules[0];
cssRule.style.fontWeight = "bold";
cssRule.selectorText = "div span";
  • shadow dom 中也有 styleSheets 属性
var cssRule = document.querySelector('#div').shadowRoot.styleSheets[0].cssRules[0];
stylesheet.insertRule(rule, index)

用于向StyleSheet对象中插入新的css内容

  • rule:必需,要插入的新规则。
  • index:可选,规定新规则插入的位置,默认值为0,也就是在样式表起始位置插入。
let styleSheet = document.styleSheets[0];
styleSheet.insertRule("#ant{color:blue}");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容