用JavaScript的样式表添加规则
日期：2013-07-10 17:10:00 由于我们使用了这么多的JavaScript在我们的Web应用程序，这些天，我们正在寻找更多的途径，让他们快速。我们使用事件代表团保持高效侦听事件，我们使用抖动功能的时候，可以用一个给定的方法，使用JavaScript加载器来加载我们需要的资源数量进行限制，等等。我们可以使我们的成都网站建设高效，快速的另一种方式是动态添加和删除一个样式，而不是不断查询DOM元素，并应用样式样式直接。在这里，它是如何工作的！
获取样式表
哪个样式表添加规则。如果你有一个特定的样式表心态，你可以添加一个ID LINK或STYLE元素在你的HTML页面，并引用元素的表属性得到CSSStyleSheet的对象。 document.styleSheets对象的样式表中可以找到：
VAR张= document.styleSheets / /返回一个类似数组StyleSheetList
/ *
返回：
StyleSheetList {0：1 CSSStyleSheet：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，长度：16，资料：函数}
* /
/ /获取***张，不管媒体
表= document.styleSheets [0];
其中一个重要的考虑因素是媒体的样式表 - 你要确保你是不是添加打印样式表的规则，当你预期的样式显示在屏幕上。一个CSSStyleSheet对象不具有信息属性给您细读：
/ /获取信息的***个样式表
console.log（document.styleSheets [0]）;
/ *
返回：
CSSStyleSheet
cssRules：CSSRuleList
href“http://davidwalsh.name/somesheet.css”
媒体：medialist中的
ownerNode：链接
ownerRule：空
parentStyleSheet：空
规则：CSSRuleList
标题：空
类型：“文本/ CSS”
* /
/ /获取媒体类型
console.log（document.styleSheets [0]。media.mediaText）
/ *
返回：
“所有”或“打印”或用于任何媒体这个样式表
* /
在任何情况下，抓住一个样式表附加样式规则的方法有很多。
创建一个新的样式表
在许多情况下，它可能是***创建一个新的动态规则STYLE元素。这是很容易的：
表=（函数（）{
/ /创建<style>标签
风格= document.createElement方法（“风格”）;
/在这里添加媒体（和/或媒体查询），如果你想！
/ / style.setAttribute的（“媒体”，“屏幕”）
/ / style.setAttribute的（“媒体”，“@媒体只有屏幕（***宽度：1024px）”）
/ / WebKit的黑客：（
style.appendChild（document.createTextNode（“”））;
/ /添加的<style>的页面元素
document.head.appendChild（样式）;
返回style.sheet;
}）（）;
不幸的是，WebKit的财产需要一个黑客得到的事情，但我们只关心该表。
添加规则
CSSStyleSheet对象有一个addRule的方法，它可以让你登记在样式表中的CSS规则。是通过addRule方法接受三个参数：选择规则的CSS代码，第二，第三个是从零开始的整数指数代表的风格定位（风格相同的选择有关）：
sheet.addRule（“＃myList的礼”，“浮动：左;背景：红色！重要”，1）;
指数的默认值是-1，这意味着集合末尾。额外/懒惰控制，你可以添加重要的规则，以避免索引的问题。 addRule在所有情况下，调用返回的结果-1 - 它确实代表不了什么。
请记住，这里的好处是自动从页面元素的加入有应用的样式给他们，即你不会有将它们添加到他们的元素注入到页面中。高效！
插入规则
样式表也有一个insertRule的的在较早的IE的方法，该方法不提供。insertRule结合前两个参数addRule：
sheet.insertRule（“头{浮动：左;不透明度：0.8;}”，1）;
此方法可能看起来有点丑，但仍然是非常有用的。
安全适用规则
由于浏览器支持为insertRule是全球***做规则的应用程序创建一个包装功能。这里有一个快速和肮脏的方法：
功能addCSSRule（片材，选择，规则，索引）{
如果（sheet.insertRule）{
sheet.insertRule（选择+“{”+规则+“}”，索引）;
}
其他{
sheet.addRule（选择，规则，索引）;
}
}
/ /使用它！
addCSSRule（document.styleSheets [0]，“头”，“浮动：左”）;
本实用方法应涵盖所有情况下的新风格的应用程序。如果你是紧张，在您的应用程序应用可变样式，在一个try {}赶上（E）{}块，这是合理的包装这种方法的内码。
媒体查询插入规则
媒体查询特定的规则可以被添加在以下两种方式之一。***种方式是通过标准insertRule方法：
sheet.insertRule（的“@媒体只有屏幕（***宽度：1140px）{头{显示：无;}}”）;
当然，因为IE已经并不总是支持insertRule的，另一种方法是创建一个样式元素与适当的媒体属性，然后加入新的样式表的样式。这可能需要杂耍多个样式元素，但是这是很容易的。我可能会创建一个对象与媒体查询索引，创建/撷取他们的方式。
动态添加样式表的规则是有效的，可能比你想象的更容易。记住你的下一个大的应用程序保持这种策略，因为它可以节省你的工作代码和元素处理。
获取样式表
哪个样式表添加规则。如果你有一个特定的样式表心态，你可以添加一个ID LINK或STYLE元素在你的HTML页面，并引用元素的表属性得到CSSStyleSheet的对象。 document.styleSheets对象的样式表中可以找到：
VAR张= document.styleSheets / /返回一个类似数组StyleSheetList
/ *
返回：
StyleSheetList {0：1 CSSStyleSheet：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，长度：16，资料：函数}
* /
/ /获取***张，不管媒体
表= document.styleSheets [0];
其中一个重要的考虑因素是媒体的样式表 - 你要确保你是不是添加打印样式表的规则，当你预期的样式显示在屏幕上。一个CSSStyleSheet对象不具有信息属性给您细读：
/ /获取信息的***个样式表
console.log（document.styleSheets [0]）;
/ *
返回：
CSSStyleSheet
cssRules：CSSRuleList
href“http://davidwalsh.name/somesheet.css”
媒体：medialist中的
ownerNode：链接
ownerRule：空
parentStyleSheet：空
规则：CSSRuleList
标题：空
类型：“文本/ CSS”
* /
/ /获取媒体类型
console.log（document.styleSheets [0]。media.mediaText）
/ *
返回：
“所有”或“打印”或用于任何媒体这个样式表
* /
在任何情况下，抓住一个样式表附加样式规则的方法有很多。
创建一个新的样式表
在许多情况下，它可能是***创建一个新的动态规则STYLE元素。这是很容易的：
表=（函数（）{
/ /创建<style>标签
风格= document.createElement方法（“风格”）;
/在这里添加媒体（和/或媒体查询），如果你想！
/ / style.setAttribute的（“媒体”，“屏幕”）
/ / style.setAttribute的（“媒体”，“@媒体只有屏幕（***宽度：1024px）”）
/ / WebKit的黑客：（
style.appendChild（document.createTextNode（“”））;
/ /添加的<style>的页面元素
document.head.appendChild（样式）;
返回style.sheet;
}）（）;
不幸的是，WebKit的财产需要一个黑客得到的事情，但我们只关心该表。
添加规则
CSSStyleSheet对象有一个addRule的方法，它可以让你登记在样式表中的CSS规则。是通过addRule方法接受三个参数：选择规则的CSS代码，第二，第三个是从零开始的整数指数代表的风格定位（风格相同的选择有关）：
sheet.addRule（“＃myList的礼”，“浮动：左;背景：红色！重要”，1）;
指数的默认值是-1，这意味着集合末尾。额外/懒惰控制，你可以添加重要的规则，以避免索引的问题。 addRule在所有情况下，调用返回的结果-1 - 它确实代表不了什么。
请记住，这里的好处是自动从页面元素的加入有应用的样式给他们，即你不会有将它们添加到他们的元素注入到页面中。高效！
插入规则
样式表也有一个insertRule的的在较早的IE的方法，该方法不提供。insertRule结合前两个参数addRule：
sheet.insertRule（“头{浮动：左;不透明度：0.8;}”，1）;
此方法可能看起来有点丑，但仍然是非常有用的。
安全适用规则
由于浏览器支持为insertRule是全球***做规则的应用程序创建一个包装功能。这里有一个快速和肮脏的方法：
功能addCSSRule（片材，选择，规则，索引）{
如果（sheet.insertRule）{
sheet.insertRule（选择+“{”+规则+“}”，索引）;
}
其他{
sheet.addRule（选择，规则，索引）;
}
}
/ /使用它！
addCSSRule（document.styleSheets [0]，“头”，“浮动：左”）;
本实用方法应涵盖所有情况下的新风格的应用程序。如果你是紧张，在您的应用程序应用可变样式，在一个try {}赶上（E）{}块，这是合理的包装这种方法的内码。
媒体查询插入规则
媒体查询特定的规则可以被添加在以下两种方式之一。***种方式是通过标准insertRule方法：
sheet.insertRule（的“@媒体只有屏幕（***宽度：1140px）{头{显示：无;}}”）;
当然，因为IE已经并不总是支持insertRule的，另一种方法是创建一个样式元素与适当的媒体属性，然后加入新的样式表的样式。这可能需要杂耍多个样式元素，但是这是很容易的。我可能会创建一个对象与媒体查询索引，创建/撷取他们的方式。
动态添加样式表的规则是有效的，可能比你想象的更容易。记住你的下一个大的应用程序保持这种策略，因为它可以节省你的工作代码和元素处理。