javascript动态添加css
来源:互联网 发布:java培训能找到工作吗 编辑:程序博客网 时间:2024/04/29 21:38
原文链接: Add Rules to Stylesheets with JavaScript
原文日期: 2014-09-04
翻译日期: 2014-09-05
翻译人员: 铁锚
现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案。
获取样式表
你可以选择任意的样式表来添加样式规则。如果你有确定的样式表,则可以在HTML页面中给 <link> 或 <style> 标签添加ID属性,然后直接通过这个DOM元素的 sheet 属性就可以取得 CSSStyleSheet 对象。样式表也可以通过document.styleSheets 遍历到:
需要特别注意的是样式表的media属性 —— 当你想在屏幕上显示的时候,你肯定不能把CSS规则加到打印样式表中。你可以仔细的看一下CSSStyleSheet对象的属性信息:
在各种情况下,你肯定都有办法来获取到要添加规则的样式表。
创建一个新样式表
在许多情况下,最好的方法可能是创建一个新的 <style> 元素来存放这些动态规则。这也很简单:
悲剧的是WebKit需要一点hack手段才能正确创建,但我们只需要关心这个sheet。
插入规则
在早期版本的IE中 Stylesheets 的 insertRule方法并不可用,虽然现在这是规则注入的标准。insertRule 方法需要编写整个CSS规则,和在样式表中是一样的写法:
这个JavaScript API方法虽然看起来有点土,但它确实就是这样运行的。第二个参数 index 表示要插入规则的位置(索引)。这也是非常有用的,这样你就可以插入同样的规则/代码,这可以让靠后的规则生效。默认的index是 -1 ,代表整个集合的末尾。如果想要有额外的/懒惰控制规则,你也可以添加 !important 标记到某条规则后,以避免索引的问题。
添加规则 —— 非标准的 addRule 方法
CSSStyleSheet 对象有一个 addRule 方法,允许你注册CSS规则到样式表中。 addRule 方法接受三个参数: 第一个参数是选择器(selector)、第二个参数是CSS规则代码, 第三个则是从0开始的整数索引,表示样式的位置(在同一个选择器中):
addRule方法的返回值总是 -1,所以这个值并没有什么实际意义.
记住,这种方式的优点在于,从页面添加的元素自动拥有了应用于他们的样式,也就是说你不必将它们添加到具体的元素上,而是直接注入到页面中。当然效率更高!
安全应用规则
因为并不是所有的浏览器都支持 insertRule 方法, 所以最好创建一个包装函数来处理规则应用。下面是一个快速的土方法:
这个工具方法应该涵盖了新增style规则的所有情况。如果你担心在应用中出错, 那么应该将该方法的代码用一个try{} catch(e){} 块包起来。
插入媒体查询规则
媒体查询规则的添加有两种方式。第一个是使用标准 insertRule 方法:
当然,因为IE老版本不支持 insertRule,所以另一种方法就是创建一个 STYLE 元素,并指定适当的 media 属性,然后将样式添加到新的样式表中。这可能需要使用多个 STYLE 元素,但也是很容易的。我可能会创建一个对象,指定媒体查询以及索引,并那样创建/获取他们。
动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。
原文日期: 2014-09-04
翻译日期: 2014-09-05
翻译人员: 铁锚
现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案。
- 我们通过 事件代理(event delegation) 让事件监听更高效,
- 我们利用 函数降频技术(function debouncing) 来限制一段时间内给定方法被调用的次数,请参考: 如何防止事件函数的高频触发(中文翻译)
- 我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等。
获取样式表
你可以选择任意的样式表来添加样式规则。如果你有确定的样式表,则可以在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];
- // 控制台输出第一个样式表的信息
- 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;
- })();
插入规则
在早期版本的IE中 Stylesheets 的 insertRule方法并不可用,虽然现在这是规则注入的标准。insertRule 方法需要编写整个CSS规则,和在样式表中是一样的写法:
- sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
添加规则 —— 非标准的 addRule 方法
CSSStyleSheet 对象有一个 addRule 方法,允许你注册CSS规则到样式表中。 addRule 方法接受三个参数: 第一个参数是选择器(selector)、第二个参数是CSS规则代码, 第三个则是从0开始的整数索引,表示样式的位置(在同一个选择器中):
- sheet.addRule("#myList li", "float: left; background: red !important;", 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");
插入媒体查询规则
媒体查询规则的添加有两种方式。第一个是使用标准 insertRule 方法:
- sheet.insertRule(
- "@media only screen and (max-width : 1140px) { header { display: none; } }"
- );
当然,因为IE老版本不支持 insertRule,所以另一种方法就是创建一个 STYLE 元素,并指定适当的 media 属性,然后将样式添加到新的样式表中。这可能需要使用多个 STYLE 元素,但也是很容易的。我可能会创建一个对象,指定媒体查询以及索引,并那样创建/获取他们。
动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。
0 0
- 动态添加CSS、javascript
- javascript动态添加css
- 使用JavaScript动态添加CSS样式规则
- php+javascript+css 实现动态添加数据行
- 在Css样式表中添加javascript,实现动态效果
- js动态添加css
- 动态添加css
- Javascript 动态添加标签
- javascript动态添加行
- JavaScript 动态添加控件
- javascript动态添加属性
- javascript动态添加表格
- 【JavaScript】动态添加控件
- javascript动态添加select
- javascript 动态添加表格
- javascript动态添加事件
- javascript动态添加div
- Javascript动态添加div
- Ubuntu12.04 的一些知识(1)
- 贝叶斯文本分类器
- 委托入门-事件与委托
- UVA - 10047 The Monocycle
- Spring-Struts2-Hibernate Maven整合
- javascript动态添加css
- netfilter详解
- 文件安全与权限(1)
- 进程间通信之命名管道
- 你必须非常努力,才能看起来毫不费力
- linux驱动--调试方法总结
- c++盲点
- 线性表中删除所有值等于X的元素(2)
- LeetCode-Permutations