CSS的StyleSheet对象用于表示一个样式表,可以通过它来操作和修改样式表的内容。
首先,可以通过以下代码获取样式表对象:
var styleSheet = document.styleSheets[0];
接下来,可以使用StyleSheet对象的方法和属性来操作样式表的内容。以下是一些常用的方法和属性:
cssRules
:获取样式表中的所有规则(即选择器和对应的样式)。var rules = styleSheet.cssRules;
insertRule(rule, index)
:向样式表中插入一条新的规则。styleSheet.insertRule("body { background-color: red; }", 0);
deleteRule(index)
:删除指定位置的规则。styleSheet.deleteRule(0);
addRule(selector, style, index)
:向样式表中插入一条新的规则。styleSheet.addRule("body", "background-color: red;", 0);
removeRule(index)
:删除指定位置的规则。styleSheet.removeRule(0);
cssText
:获取或设置样式表的完整文本。var cssText = styleSheet.cssText;
styleSheet.cssText = "body { background-color: red; }";
注意:上述方法中的index
参数表示要操作的规则在样式表中的位置。
综上所述,可以通过使用StyleSheet对象的方法和属性来对样式表进行增删改查的操作。