复制代码 代码如下: #flower { width:100px; font-size:12px; float:left; opacity:0.5; filter:alpha(opacity=50); } 定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性 <div id="flower" >...</div> getStyle函数: 这里用到了三个原型扩展 String.prototype.capitalize 这个方法是让字符串首字母大写 Array.prototype.contains 判断数组中是否有指定成员 String.prototype.camelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式 复制代码 代码如下: String.prototype.capitalize=function(){ return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase(); } Array.prototype.contains=function(A){ return (this.indexOf(A) >= 0); } String.prototype.camelize=function(){ return this.replace(/-(w)/ig, function(B, A) { return A.toUpperCase(); }); } var css={ getStyle:function(elem,styles){ var value, elem=document.getElementById(elem); if(styles == "float"){ document.defaultView ? styles = 'float' /*cssFloat*/ : styles='styleFloat'; } value=elem.style[styles] || elem.style[styles.camelize()]; if(!value){ if (document.defaultView && document.defaultView.getComputedStyle) { var _css=document.defaultView.getComputedStyle(elem, null); value= _css ? _css.getPropertyValue(styles) : null; }else{ if (elem.currentStyle){ value = elem.currentStyle[styles.camelize()]; } } } if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){ value=elem["offset"+styles.capitalize()]+"px"; } if(styles == "opacity"){ try { value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity; value =value/100; }catch(e) { try { value = elem.filters('alpha').opacity; } catch(err){} } } return value=="auto" ? null :value; } } css.getStyle("flower","width"); //100px; css.getStyle("flower","font-size");//12px; css.getStyle("flower","float");//left css.getStyle("flower","opacity");//0.5 先回顾下基础 style 标准的样式！可能是由style属性指定的！ runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！ currentStyle 指 style 和 runtimeStyle 的结合！ style 内联的样式 currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式 runtimeStyle 代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式 (FF中没有currentStyle 和runtimeStyle) getStyle(元素id,获取属性); 获取元素style标签内的样式 elem.style[styles] || elem.style[styles.camelize()] 支持传入"font-size"的写法 但这并不是最终的样式 . 获取最终样式 有两终办法 一个是 document.defaultView.getComputedStyle //w3c的方法 还有就是通过 elem.currentStyle["..."] //ie下的方法 currentStyle 方法 需要将带"-"字符的属性 需要通过String.prototype.camelize转换成ie可识别的属性 复制代码 代码如下: if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){ value=elem["offset"+styles.capitalize()]+"px"; } 当 css中定义 元素的宽度为 auto时，并不能获取元素的最终宽度是多少，我们可以用 offsetWidth 和 offsetHeight 获取实际值 当然前提是要在元素为"可见"的状态下! 复制代码 代码如下: try { value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity; value =value/100; }catch(e) { try { value = elem.filters('alpha').opacity; } catch(err){} } 这是获取透明度的方法,ie中定义透明度和其他浏览器不同.需把通过滤镜得到的opacity值/100。返回标准的opacity值(范围0-1);

　　推荐阅读

　　基于jquery的tab切换 js原理

html代码: 复制代码 代码如下: <div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3"><b>在来个</b></li><li></li></ul> <dl id=">>>详细阅读

本文标题：JS getStyle获取最终样式函数代码

地址：http://www.17bianji.com/kaifa2/JS/26721.html

 1/2    1