// 返回一个类似数组的(Array-like)样式列表 StyleSheetList
var sheets = document.styleSheets;
/*
返回值类似下面这样:
StyleSheetList
{
0: CSSStyleSheet,
1: CSSStyleSheet,
2: CSSStyleSheet,
3: CSSStyleSheet,
4: CSSStyleSheet,
length: 5,
item: function
}
*/
// 获取第一个sheet, 先不管 media属性
var sheet = document.styleSheets[0];需要特别注意的是样式表的media属性 —— 当你想在屏幕上显示的时候,你肯定不能把CSS规则加到打印样式表中。你可以仔细的看一下CSSStyleSheet对象的属性信息:// 控制台输出第一个样式表的信息
console.log(document.styleSheets[0]);
/*
返回值:
CSSStyleSheet
cssRules: CSSRuleList[对象]
disabled: false
href: "http://davidwalsh.name/somesheet.css"
media: MediaList[对象]
ownerNode: link[对象]
ownerRule: null
parentStyleSheet: null
rules: CSSRuleList[对象]
title: null
type: "text/css"
*/
// 获取媒体类型(media type)
console.log(document.styleSheets[0].media.mediaText)
/*
返回值可能是:
"all" 或者 "print" 或者是其他应用到此样式表的 media
*/在各种情况下,你肯定都有办法来获取到要添加规则的样式表。var sheet = (function() {
// 创建 <style> 标签
var style = document.createElement("style");
// 可以添加一个媒体(/媒体查询,media query)属性
// style.setAttribute("media", "screen")
// style.setAttribute("media", "only screen and (max-width : 1024px)")
// 对WebKit hack :(
style.appendChild(document.createTextNode(""));
// 将 <style> 元素加到页面中
document.head.appendChild(style);
return style.sheet;
})();悲剧的是WebKit需要一点hack手段才能正确创建,但我们只需要关心这个sheet。sheet.insertRule("header { float: left; opacity: 0.8; }", 1);这个JavaScript API方法虽然看起来有点土，但它确实就是这样运行的。第二个参数 index 表示要插入规则的位置(索引)。这也是非常有用的,这样你就可以插入同样的规则/代码,这可以让靠后的规则生效。默认的index是 -1 ,代表整个集合的末尾。如果想要有额外的/懒惰控制规则,你也可以添加 !important 标记到某条规则后,以避免索引的问题。sheet.addRule("#myList li", "float: left; background: red !important;", 1);addRule方法的返回值总是 -1,所以这个值并没有什么实际意义.function addCSSRule(sheet, selector, rules, index) {
if("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else if("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}
// 使用方式
addCSSRule(document.styleSheets[0], "header", "float: left");这个工具方法应该涵盖了新增style规则的所有情况。如果你担心在应用中出错, 那么应该将该方法的代码用一个 try{} catch(e){} 块包起来。sheet.insertRule(
"@media only screen and (max-width : 1140px) { header { display: none; } }"
);原文地址：http://blog.csdn.net/renfufei/article/details/39085235
