当前位置:主页>技术研究院>网页设计>正文

操作样式表

2015-01-12 来源:未知 责任编辑:佚名 点击:

分享到:

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);

Copyright © 2007-2014 CDNET.ORG.CN. 成都网络行业协会 版权所有
54_1 54_2 54_3 54_4 54_5 54_6 54_7 54_8 54_9 54_10 54_11 54_12 54_13 54_14 54_15 54_16 54_17 54_18 54_19 54_20 54_21 54_22 54_23 54_24 54_25 54_26 54_27