你的位置:首页 > Java教程

[Java教程][javascript][翻译]使用javascript添加css rule


  来杭一周,收获很多,成长很多。

  周六在搞一个插件的时候碰到需要动态添加伪元素的需求,搜了一下解决方案,有人用正则写出了读取伪元素的函数;我觉得倒是可以通过注入css rule的方式,来让预留有某些类的标签动态产生伪元素。

  然后在google上搜到这样一篇文章,讲了一下之前没了解到的api函数:addrule等,翻译一下,分享一下好了。

  原博文网址:http://davidwalsh.name/add-rules-stylesheets

 

译文如下:

 

  因为我们在开发中javascript使用的越来越多,所以我们总是想尽办法想让它更快。我们使用事件代理来监听事件,使用函数节流来限制单位时间内函数的调用次数,使用loader方法来加载最需要的资源。这些方法都可以让我们的页面加载、渲染、执行的速度有一定的加快。本文要说另一种方法:通过动态添加删除CSS样式代替原有的查找节点并修改来应用某些样式。

  • 获取样式表 

  我们可以选择向页面内的某条stylesheet中添加样式。可以给<link>标签或者<style>标签添加ID,通过引用节点的sheet属性来获取CSSStyleSheet对象。页面中的stylesheets可以使用document.styleSheets来获取:

var sheets = document.styleSheets; // returns an Array-like StyleSheetList//返回一个类数组对象/*Returns: StyleSheetList {0: CSSStyleSheet, 1: 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, length: 16, item: function}*/// Grab the first sheet, regardless of media//先不管第一个样式的具体应用media(注:可能是print等)var sheet = document.styleSheets[0];

  在我们选取link或者style标签时,我们应该考虑被选中的样式表标签是否是应用于screen,而不是print等。CSSStyleSheet对象给我们提供了这样的属性:

// Get info about the first stylesheetconsole.log(document.styleSheets[0]);/*Returns: 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"*/// Get the media type//获取media类型console.log(document.styleSheets[0].media.mediaText)/*Returns:  "all" or "print" or whichever media is used for this stylesheet*/

  当然除了上面的,还有别的方法可以获取stylesheet对象。

  

  • 创建新样式表

  有些情况下,可能新建一个style节点来承装新添加的style rule。方法很简单:

var sheet = (function() {  // Create the <style> tag  var style = document.createElement("style");  // Add a media (and/or media query) here if you'd like!  // style.setAttribute("media", "screen")  // style.setAttribute("media", "only screen and (max-width : 1024px)")  // WebKit hack :(    //webkit内核浏览器的hack:  style.appendChild(document.createTextNode(""));  // Add the <style> element to the page 插入页面  document.head.appendChild(style);  return style.sheet;})();  

  请留意上面第三条语句是为webkit浏览器添加的hack。

  

  • 插入规则  insertRule(styles,[index])

  Stylesheets对象提供了insertRule(译者注:IE8及以下不兼容,具体参考链接http://www.quirksmode.org/dom/w3c_css.html )方法。insertRule函数要求传入css样式风格的str作为参数。

  具体调用方法:

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

  (译者注:传入的样式str的格式要求很多。就我目前发现的:1.{}两个花括号和前后最好都有一个空格 2.如果是webkit内核,函数在解析带有-moz-前缀的样式规则时会抛err)

  这种方法看上去有点丑,但是确实有用。第二个参数Index,表示我们将在样式内部的哪一条插入新样式css rule,这就可以帮助我们实现原有样式的覆盖。默认index取值是-1(译者注:但是输入-1在chrome 41下抛了err,提示参数不能小于0,这里值得在研究一下),表示默认在样式最后追加。如果想强制覆盖,可以使用!important,来避免插入次序引起其他问题。

 

  • 添加规则(非标准函数)  addRule(selector,styles,index)

  CSSStyleSheet对象有一个非标准函数addRule,和insertRule相比,它更像js api的调用风格,无需自己注意插入的样式字符串的格式。addRule方法接受三个参数,分别是选择器selector,样式字符串"color:red;font-size:12px",和插入次序index。

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

  方法有返回值,为-1。但是没有什么具体含义。

  这种方式可以快速高效的改变页面上节点的已有样式。

  

  • 应用样式

  因为上面提到两个函数都不是常见api函数,所以需要做浏览器兼容性处理。

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);  }}// Use it!addCSSRule(document.styleSheets[0], "header", "float: left");

  这种方法可以应用于所有高级的浏览器,如果还是有担心的话,可以在调用时使用try-catch结构。

 

  • 为Media queries插入样式规则

  如果你需要插入media-queries的css样式规则,你只能使用第一个insertRule方法。

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

  IE不支持insertRule函数,所以另一种方法是创建style标签节点,通过写入的方式来注入样式规则。

 

  动态添加样式规则是有效且容易的。在下一个应用里尝试一下吧,你会发现这个真的很好用~

 

译文结束