JS 获取最终样式 【getStyle】


1 #flower {
2     width:100px;
3     font-size:12px;
4     float:left;
5     opacity:0.5;
6     filter:alpha(opacity=50); 
7  }

  定义一个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);

 


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3