还有几个生不逢时的方法:
- 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 capitalize = function(prop){ return prop.replace(/\b[a-z]/g, function(match){ return match.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))
}
}
原文:http://www.cnblogs.com/rubylouvre/archive/2009/08/30/1556869.html
本文链接:http://www.blueidea.com/tech/web/2009/6984.asp
出处:Ruby's Louvre
责任编辑:bluehearts
上一页 再谈动态添加样式规则 [1] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|