JS getStyle获取最终样式函数代码
2010-04-01 00:00
351 查看
#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);
相关文章推荐
- 原生js获取元素最终计算结果样式代码
- (转载)记录函数 getStyle() 获取元素 CSS 样式
- 获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
- js获取图片大小的函数代码
- JS获取和修改元素样式的实例代码
- JS获取标签最终样式
- js获取元素样式属性值 - 较为灵活的函数
- js获取指定节点对象的样式属性的值的封装函数(兼容ie、Opera和符合w3c标准浏览器)
- 实现一个获取元素样式的函数getStyle
- 获取monxin_table.js 路径 Monxin专用(PHP代码函数)
- JS代码获取当前日期时支持IE,不兼容FF和chrome,解决这个问题,我们需要把获取时间的getYear()函数换成getFullYear()
- js 一段代码获取元素class样式
- js类中获取外部函数名的方法与代码
- 获取对象样式属性函数getStyle()
- JS获取最终样式
- 获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
- 获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
- 用JS获取函数相关的代码
- js获取图片大小的函数代码