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 实用的文字链提示框效果
Jun 30 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
javascript求日期差的方法
Mar 02 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
五个PHP程序员工具
2008/05/26 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
javascript计时器详解
2015/02/28 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
python中append函数用法讲解
2020/12/11 Python
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
绿色学校实施方案
2014/03/31 职场文书
《学会合作》教学反思
2014/04/12 职场文书
捐款通知怎么写
2015/04/24 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书