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

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))
}
}

您可能感兴趣的文章: