JavaScript实现动态创建CSS样式规则方案


Posted in Javascript onSeptember 06, 2014

现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案。

1.我们通过 事件代理(event delegation) 让事件监听更高效,
2.我们利用 函数降频技术(function debouncing) 来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译)
3.我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等。

还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加和删除样式表中的某些样式,用来取代不断地查询DOM元素,并应用各种样式。下面是它的工作原理。

获取样式表

你可以选择任意的样式表来添加样式规则。如果你有确定的样式表,则可以在HTML页面中给 <link> 或 <style> 标签添加ID属性,然后直接通过这个DOM元素的 sheet 属性就可以取得 CSSStyleSheet 对象。样式表也可以通过 document.styleSheets 遍历到:

// 返回一个类似数组的(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

*/

在各种情况下,你肯定都有办法来获取到要添加规则的样式表。

创建一个新样式表

在许多情况下,最好的方法可能是创建一个新的 <style> 元素来存放这些动态规则。这也很简单:

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。

插入规则

在早期版本的IE中 Stylesheets 的 insertRule方法并不可用,虽然现在这是规则注入的标准。insertRule 方法需要编写整个CSS规则,和在样式表中是一样的写法:

sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

这个JavaScript API方法虽然看起来有点土,但它确实就是这样运行的。第二个参数 index 表示要插入规则的位置(索引)。这也是非常有用的,这样你就可以插入同样的规则/代码,这可以让靠后的规则生效。默认的index是 -1 ,代表整个集合的末尾。如果想要有额外的/懒惰控制规则,你也可以添加 !important 标记到某条规则后,以避免索引的问题。

添加规则 —— 非标准的 addRule 方法

CSSStyleSheet 对象有一个 addRule 方法,允许你注册CSS规则到样式表中。 addRule 方法接受三个参数: 第一个参数是选择器(selector)、第二个参数是CSS规则代码, 第三个则是从0开始的整数索引,表示样式的位置(在同一个选择器中):

sheet.addRule("#myList li", "float: left; background: red !important;", 1);

addRule方法的返回值总是 -1,所以这个值并没有什么实际意义.
记住,这种方式的优点在于,从页面添加的元素自动拥有了应用于他们的样式,也就是说你不必将它们添加到具体的元素上,而是直接注入到页面中。当然效率更高!

安全应用规则

因为并不是所有的浏览器都支持 insertRule 方法, 所以最好创建一个包装函数来处理规则应用。下面是一个快速的土方法:

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){} 块包起来。

插入媒体查询规则

媒体查询规则的添加有两种方式。第一个是使用标准 insertRule 方法:

sheet.insertRule(

  "@media only screen and (max-width : 1140px) { header { display: none; } }"

  );

当然,因为IE老版本不支持 insertRule,所以另一种方法就是创建一个 STYLE 元素,并指定适当的 media 属性,然后将样式添加到新的样式表中。这可能需要使用多个 STYLE 元素,但也是很容易的。我可能会创建一个对象,指定媒体查询以及索引,并那样创建/获取他们。

动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。

Javascript 相关文章推荐
javascript FormatNumber函数实现方法
Dec 30 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
小程序实现筛子抽奖
May 26 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 #Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 #Javascript
js获取页面传来参数的方法
Sep 06 #Javascript
用javascript关闭本窗口技巧小结
Sep 05 #Javascript
使用jquery解析XML示例代码
Sep 05 #Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 #Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 #Javascript
You might like
如何分别全角和半角以避免乱码
2006/10/09 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
webpack之devtool详解
2018/02/10 Javascript
react build 后打包发布总结
2018/08/24 Javascript
js实现点击烟花特效
2020/10/14 Javascript
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python 日志 logging模块详细解析
2020/03/31 Python
python如何输出反斜杠
2020/06/18 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
单位领导证婚词
2014/01/14 职场文书
给老婆的保证书
2015/01/16 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
JavaScript canvas实现流星特效
2021/05/20 Javascript
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
React实现动效弹窗组件
2021/06/21 Javascript