再谈javascript 动态添加样式规则 W3C校检

更新时间：2009年12月25日 02:52:31 作者：

Ruby's Louvre blog都是一些精品内容，下面这个是介绍javascript 动态添加样式规则，而且最后的函数，可以让你的css通过w3c的验证。

毫无疑问，基于表现与结构相分离的原则，直接导入一个新的样式表是最好的选择，但有些情况就行不通，如我们做一个能拖动的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的校检。

复制代码代码如下:

 
var addSheet = function(){ 
var doc,cssCode; 
if(arguments.length == 1){ 
doc = document; 
cssCode = arguments[0] 
}else if(arguments.length == 2){ 
doc = arguments[0]; 
cssCode = arguments[1]; 
}else{ 
alert("addSheet函数最多接受两个参数!"); 
} 
if(!+"\v1"){//新增功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜 
var t = cssCode.match(/opacity:(\d?\.\d+);/); 
if(t!= null){ 
cssCode = cssCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+");"); 
} 
} 
cssCode = cssCode + "\n";//增加末尾的换行符，方便在firebug下的查看。 
var headElement = doc.getElementsByTagName("head")[0]; 
var styleElements = headElement.getElementsByTagName("style"); 
if(styleElements.length == 0){//如果不存在style元素则创建 
if(doc.createStyleSheet){ //ie 
doc.createStyleSheet(); 
}else{ 
var tempStyleElement = doc.createElement('style');//w3c 
tempStyleElement.setAttribute("type", "text/css"); 
headElement.appendChild(tempStyleElement); 
} 
} 
var styleElement = styleElements[0]; 
var media = styleElement.getAttribute("media"); 
if(media != null && !/screen/.test(media.toLowerCase()) ){ 
styleElement.setAttribute("media","screen"); 
} 
if(styleElement.styleSheet){ //ie 
styleElement.styleSheet.cssText += cssCode;//添加新的内部样式 
}else if(doc.getBoxObjectFor){ 
styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加样式表字串 
}else{ 
styleElement.appendChild(doc.createTextNode(cssCode)) 
} 
} 

您可能感兴趣的文章:

javascript 不让鼠标事件触发
div上加了onclick事件，里面又有超链a，点超链的时候能不触发div 的事件吗？
2007-12-12
js控制web打印(局部打印)方法整理
本文整理了一些常用的web打印及局部打印的方法以备不时之需，感兴趣的朋友可以学习下
2013-05-05
javascript定义变量时带var与不带var的区别分析
这篇文章主要介绍了javascript定义变量时带var与不带var的区别,以一个简单实例分析了变量定义时带var与不带var的执行原理及用法区别,需要的朋友可以参考下
2015-01-01
详解JS中的attribute属性
Attribute是属性的意思，文章仅对部分兼容IE和FF的Attribute相关的介绍。具体内容详情大家参考下本文
2017-04-04
原生javascript实现addClass,removeClass,hasClass函数
这篇文章主要介绍了原生javascript实现addClass,removeClass,hasClass函数的相关代码，有需要的小伙伴可以参考下
2016-02-02
理解Javascript_06_理解对象的创建过程
在《理解Javascript_05_原型继承原理》一文中已经详细的讲解了原型链的实现原理，大家都知道原型链是基于对象创建的（没有对象,哪来原型），那么今天就来解析一下对象的创建过程。
2010-10-10
javascript为下拉列表动态添加数据项
这篇文章主要介绍了javascript如何为下拉列表动态添加数据项,需要的朋友可以参考下
2014-05-05
Javascript BOM学习小结(六)
BOM：BrowserObjectModel,浏览器对象模型，提供JS中对浏览器的各种操作的对象，是JS应用中唯一没有相关标准的部分，这事BOM经常出现问题的所在，主要用于处理浏览器窗口与框架，浏览器特有的JS扩展也被默认为BOM的一部分，而各浏览器之间的公有对象就成了默认的标准
2015-11-11
js实现弹框效果
这篇文章主要为大家详细介绍了js实现弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
JavaScript如何实现LRU缓存淘汰算法
LRU（Least Recently Used）缓存淘汰算法是一种常见的缓存淘汰策略，它的核心思想是优先淘汰最近最少使用的缓存数据，以保证缓存中的数据始终是最热门的。本文主要介绍了一些关于如何实现LRU缓存淘汰算法的方法，感兴趣的小伙伴可以参考一下
2023-04-04