谈动态添加样式规则

http://www.cnblogs.com/rubylouvre/archive/2009/08/30/1556869.html

毫无疑问，基于表现与结构相分离的原则，直接导入一个新的样式表是最好的选择，但有些情况就行不通，如我们做一个能拖动的DIV，从设置样式的角度看，就是把它绝对定位，以防影响原来的文档流，然后一点点改变其top与left的值实现移动的效果。由于拖动是有时间概念的，一秒24帧，样式表不可能面面俱到都把它们写进去。因此动态生成样式规则与快速修改样式规则是非常有必要的，W3C为此做了大量的工作，在DOM2.0中，扩充了不少接口。

退一步说，表现与结构相分离也不止导入样式表这一条路。要知道，一共有三种样式类型，外部样式，内部样式，与内联样式。

• 外部样式，就是我们上面说的那个，写在一个独立的CSS文件中。
• 内部样式，就是独立写在一个style标签中，通常是放在head标签中，我最后提供的函数生成的样式就是内部样式。
• 内联样式，就是写在元素的style属性中的样式。

新添加的接口主要集中在外部样式中——之所以说接口，因为相应的实现是由浏览器方提供的，像IE6那样傲慢的家伙，从来无视它们的存在。

在W3C的模型中，type为"text/css"的link标签与style标签都是代表一个CSSStyleSheet对象，我们可以通过document.styleSheets 获得当前页面中所有的CSSStyleSheet对象，不过这是一个集合，非单纯的数组。每一个CSSStyleSheet对象拥有如下属性，

• type：永远返回“text/css”字符串。
• disabled：和input的disabled的作用相同，默认是false。
• href：返回URL，如果是style标签为null。
• title：返回其title的值，title与普通元素的title无异，随你写什么。
• media：IE与火狐返回的东西并不一致，不太好说。media是用来规定它拥有的样式规则对什么设备有效，默认是所有。
• ownerRule：返回一个只读的CSSRule对象，如果样式表是用@import引入的话。
• cssRules： 返回一个只读的样式规则对象（CSSStyleRule object）的集合。

样式规则对象(CSSStyleRule object)，是W3C为了对样式进行更细致的设定而搞出来的，如下面这个东西就是对应一个样式规则对象:

button[type] {    padding : 4px 10px 4px 7px ;      line-height : 17px ;           }

样式规则对象拥有如下几个主要属性：type,cssText,parentStyleSheet，parentRule。

type有点类似节点的nodeType，对样式规则进行细分，它是用一个整数来表示其类型。具体情况如下

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (定义一个CSSStyleRule对象)
• 2: CSSRule.CHARSET_RULE (定义一个CSSCharsetRule对象，用于设定当前样式表的字符集，默认与当前网页相同)
• 3: CSSRule.IMPORT_RULE (定义一个CSSImportRule对象，就是用@import引入其他的样式表)
• 4: CSSRule.MEDIA_RULE (定义一个CSSMediaRule对象，用于设定此样式是用于显示器，打印机还是投影机等等)
• 5: CSSRule.FONT_FACE_RULE (定义一个CSSFontFaceRule对象，CSS3的@font-face)
• 6: CSSRule.PAGE_RULE (定义一个CSSPageRule对象)

cssText不用多说，一个非常有用的属性，直接把字符串转换成样式规则，无视各浏览器样式属性的差异，如cssFloat 和styleFloat。

parentStyleSheet和parentRule都是针对@import来说的。不过，@import在IE下有问题，我基本不用它。

还有几个生不逢时的方法：

• nsertRule(rule,index): 添加一条样式规则。
• deleteRule(index): 移除一条样式规则。
• getPropertyValue(propertyName) 获取元素相应样式属性的值。如我们获得一个样式规则对象，可以利用CSSStyleRuleObject. getPropertyValue("color")获得其字体颜色的设置。与普通的el.style.color的方法相比，其效率相当高，因为el.style.color获取的是内联样式，像IE那样的怪胎，如果你的元素没有设置style属性，根本无法得到准备的值，可能为空，可能是inhert……可能还有兼容问题，而且这内联属性不一定是最终应用于元素的样式，IE只有调用不那么废物的el.currentStyle[prop]，其他浏览器就调用相当争气但有点麻烦的document. defaultView. getComputedStyle(el, "")[prop]。
• removeProperty(propertyName) 移除元素相应样式属性。
• setProperty(propertyName,value,priority)设定元素添加一个样式，还能指定优先级。

我们可以弄一个设定样式的函数出来：

var hyphenize = function (name){    return name.replace( /([A-Z])/g, "-$1" ).toLowerCase(); }       var camelize = function (name){    return name.replace(/\-(\w)/g, function (all, letter){      return letter.toUpperCase();    }); } var setStyle = function (el, styles) {    for ( var property in styles) {      if (!styles.hasOwnProperty(property)) continue ;      if (el.style.setProperty) {        //必须是连字符风格，el.style.setProperty('background-color','red',null);        el.style.setProperty(hyphenize(property),styles[property], null );           } else {        //必须是驼峰风格，如el.style.paddingLeft = "2em"        el.style[camelize(property)] = styles[property]      }    }    return true ; }

使用方法：

setStyle(div,{    'left' :0,    'top' :0,    'line-height' : '2em' ,    'padding-right' : '4px' });

不过我非常不喜欢这方法，生成的是内联样式，它还得特殊处理float与opacity。在IE7的内联样式中，滤镜还有一个Bug，一定要让其得到hasLayout，要不滤镜就不会生效(我们可以通过el.currentStyle.hasLayout查看其状况)。因此，如其一个个设置，不如用cssText一网打尽。

最后附上我的加强版addSheet方法。它增添自动处理opacity的功能，也就是说我们只需要按标准设置cssText，它会自动生成相应的滤镜，这样一来至少让火狐等浏览器通过W3C的校检。

//2010.01.27更新 司徒正美      var addSheet = function (css){          if (!-[1,]){              css = css.replace(/opacity:\s*(\d?\.\d+)/g, function ($,$1){                  $1 = parseFloat($1) * 100;                  if ($1 < 0 || $1 > 100)                      return "" ;                  return "filter:alpha(opacity=" + $1 + ");"              });          }          css += "\n" ; //增加末尾的换行符，方便在firebug下的查看。          var doc = document, head = doc.getElementsByTagName( "head" )[0],          styles = head.getElementsByTagName( "style" ),style,media;          if (styles.length == 0){ //如果不存在style元素则创建              if (doc.createStyleSheet){    //ie                  doc.createStyleSheet();              } else {                  style = doc.createElement( 'style' ); //w3c                  style.setAttribute( "type" , "text/css" );                  head.insertBefore(style, null )              }          }          style = styles[0];          media = style.getAttribute( "media" );          if (media === null && !/screen/i.test(media) ){              style.setAttribute( "media" , "all" );          }          if (style.styleSheet){    //ie              style.styleSheet.cssText += css; //添加新的内部样式          } else if (doc.getBoxObjectFor){              style.innerHTML += css; //火狐支持直接innerHTML添加样式表字串          } else {              style.appendChild(doc.createTextNode(css))          }      }

有网友问，为何要优先使用已有样式表来添加新的样式规则，这是因为在IE(包括IE6、IE7和IE8 beta1)中有如下限制：

1. 文档中只有前31个link或style标记关联的CSS能够应用。 从第32个开始，其标记关联的CSS都将失效。IE的官方文档All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及这个限制，包括在使用.xsl的.xml文件也有这个限制。
2. 一个style标记只有前31次@import指令有效应用。从第32个@import指令开始忽略。
3. 一个css文件只有前31次@import指令有效应用。从第32个@import指令开始忽略。
4. IE中每个style标签或css文件的选择符个数不能超过4095。
5. @import指令下层叠限制不能超过4层在IE下通过@import指令引入css文件时，第5层会失效。这个限制来自Cascade limit via @import rule。实际上，由于浏览器对多层嵌套的支持不完善，所以即使不得已使用了@import指令引入CSS文件，也不要超过2层。