JS getStyle获取最终样式函数代码_javascript技巧-js-Tutorial-php.cn

JS getStyle获取最终样式函数代码_javascript技巧

WBOY

Freigeben： 2016-05-16 18:30:56

Original

916 Leute haben es durchsucht

 
#flower { 
width:100px; 
font-size:12px; 
float:left; 
opacity:0.5; 
filter:alpha(opacity=50); 
} 

定义一个id="flower"的div元素并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性

...

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