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對象的方法和屬性來對樣式表進行增刪改查的操作。