当前位置：首页 > 资讯 > 技术文档

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

时间：2021-02-18 10:47 编辑：来源：阅读：
扫一扫，手机访问

摘要：JS getStyle获取最终样式函数代码

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

定义一个id="flower"的div元素并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性 <div id="flower" >...</div> [b]getStyle函数:[/b] 这里用到了三个原型扩展 String.prototype.capitalize 这个方法是让字符串首字母大写 Array.prototype.contains 判断数组中是否有指定成员 String.prototype.camelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式

[u]复制代码[/u] 代码如下:

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

[b]先回顾下基础[/b] 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可识别的属性

[u]复制代码[/u] 代码如下:

if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){
value=elem["offset"+styles.capitalize()]+"px";
}

当 css中定义元素的宽度为 auto时，并不能获取元素的最终宽度是多少，我们可以用 offsetWidth 和 offsetHeight 获取实际值当然前提是要在元素为"可见"的状态下!

[u]复制代码[/u] 代码如下:

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

全部评论(0)

上一篇：非常棒的10款jQuery 幻灯片插件
下一篇：jQuery实现隔行背景色变色

资讯排行榜
更多>>