JavaScript实现动态创建CSS样式规则方案
现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案。
1.我们通过事件代理(eventdelegation)让事件监听更高效,
2.我们利用函数降频技术(functiondebouncing)来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译)
3.我们使用JavaScript加载器来加载我们确实需要的那部分资源,等等。
还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加和删除样式表中的某些样式,用来取代不断地查询DOM元素,并应用各种样式。下面是它的工作原理。
获取样式表
你可以选择任意的样式表来添加样式规则。如果你有确定的样式表,则可以在HTML页面中给<link>或<style>标签添加ID属性,然后直接通过这个DOM元素的sheet属性就可以取得CSSStyleSheet对象。样式表也可以通过document.styleSheets遍历到:
//返回一个类似数组的(Array-like)样式列表StyleSheetList varsheets=document.styleSheets;
/* 返回值类似下面这样:
StyleSheetList { 0:CSSStyleSheet, 1:CSSStyleSheet, 2:CSSStyleSheet, 3:CSSStyleSheet, 4:CSSStyleSheet, length:5, item:function } */
//获取第一个sheet,先不管media属性 varsheet=document.styleSheets[0];