操作样式表

操作样式表


CSSStyleSheet 类型表示的是样式表，包括通过 <link> 元素包含的样式表和在 <style> 元素中定义的样式表。这两个元素本身分别是由 HTMLLinkElement 和 HTMLStyleElement 类型表示的。

CSSStyleSheet 属性：

var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets", "2.0");


var sheet = null;
for (var i=0, len=document.styleSheets.length; i<len; i++) {
sheet = document.styleSheets[i];
alert(sheet.href);
}


function getStyleSheet(element) {
return element.sheet || element.styleSheet;
}


//取得第一个<link/>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStylesheet(link);

CSS 规则

CSSRule 对象表示样式表中的每一条规则。实际上， CSSRule 是一个供其他多种类型继承的基类型，其中最常见的就是 CSSStyleRule 类型，表示央视信息(其他规则还有@import、@font-face、@page 和 @charset，但这些规则很少有必要通过脚本来访问)。

CSSRule 属性：

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表
var rule = rules[0]; //取得第一条规则
alert(rule.selectorText); //"div.box"
alert(rule.style.cssText); //完整的 CSS 代码
alert(rule.style.backgroundColor); //"blue"
alert(rule.style.width); //"100px"
alert(rule.style.height); //"200px"


var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表
var rule = rules[0]; //取得第一条规则
rule.style.backgroundColor = "red";


创建规则


sheet.insertRule("body {background-color: silver}", 0);//DOM 方法  非IE


sheet.addRule("body", "background-color: silver", 0);//仅对 IE 有效


function insertRule(sheet, selectorText, cssText, position) {
if (sheet.insertRule) {
sheet.insertRule(selectorText + "(" + cssText + ")", position);
} else if (sheet.addRule) {
sheet.addRule(selectorText, cssText position);
}
}


insertRule(document.styleSheets[0], "body", "background-color:silver", 0);


删除规则


sheet.deleteRule(0); //DOM 方法  非IE


sheet.removeRule(0); //仅对 IE 有效


function deleteRule(sheet, index) {
if (sheet.deleteRule) {
sheet.deleteRule(index);
} else if (sheet.removeRule) {
sheet.removeRule(index);
}
}


deleteRule(document.styleSheets[0], 0);