如今的这个年代，流行在Web页面上使用了大量的JavaScript，我们需要寻找各种方式来优化它们，使它们更快。我们使用事件委托来让事件监听器更有效率，使用降频技术来限定某些方法的使用次数，使用各种JavaScript加载器来动态加载我们需要的资源，等等。另外一种让页面更高效、更敏捷的方法是动态的添加或移除样式表里的样式，而不需要去查询DOM元素，对每个元素做样式调整。下面我们就来看看如何使用这种技术！
捕获样式表
你的页面上可能引用了不只一个的样式文件，你可以选择其中的一个。如果你指定了某个，你可以在HTML页面中的LINK 和 STYLE标签上加入ID来进行区别，获取CSSStyleSheet对象，它存放在document.styleSheets对象里。
返回：
StyleSheetList {0: CSSStyleSheet,1: CSSStyleSheet,2: CSSStyleSheet,3: CSSStyleSheet,4: CSSStyleSheet,5: CSSStyleSheet,6: CSSStyleSheet,7: CSSStyleSheet,8: CSSStyleSheet,9: CSSStyleSheet,10: CSSStyleSheet,11: CSSStyleSheet,12: CSSStyleSheet,13: CSSStyleSheet,14: CSSStyleSheet,15: CSSStyleSheet,length: 16,item: function}
*/
// 找到你想要修改的样式表
var sheet = document.styleSheets[0];
一个重要的需要注意的事情是样式表的media属性——如果你不小心，当想往屏幕显示使用的样式表里做修改操作时，你也许会错误的修改了用于打印(print)时使用的样式表。CSSStyleSheet对象里有各种属性信息，需要时你可以从中获取。
返回结果：
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"
*/
// Get the media type
console.log(document.styleSheets[0].media.mediaText)
/
Returns:
"all" or "print" or whichever media is used for this stylesheet
/