你的位置:首页 > Java教程

[Java教程]getComputedStyle(and currentStyle)

 

1.getComputedStyle

  1.1 用法:

 

currentStyle获取计算后的样式,也叫当前样式、最终样式。优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到。注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等。

currentStyle 在ie、opera上是可行的,无法适用于所有浏览器的
getComputedStyle(obj , false ) 是支持 w3c (FF12、chrome14、safari):在FF新版本中只需要第一个参数,即操作对象,第二个参数写“false”也是大家通用的写法,目的是为了兼容老版本的火狐浏览器。

function getStyle(obj, attr) {

  //ie,ff
     return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
}

 

1.2 异常:

  Window.getComputedStyle does not implement interface Element"

  一般是由于传入的参数引起的:例如

  //抖动的框框pro
        function shakeFn()
        {    
            var _this = this;
            shake(_this, "left", function(){
                shake(_this, "top");
            });
        }

  尽量不要用this,用对象替代,至于为什么,,有时间再研究。

  function shakeFn(el){    
        // var _this = this;
        shake(el, "left", function(){
            // shake(el, "top");
        });
    }
   

2.详解(http://blog.163.com/yx_xie2007/blog/static/1024642532011821103751157/)

Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表,以数组形式返回,并且是readonly的。IE中则用currentStyle代替。

语法:arr_style=window.getComputedStyle(elem_id,ov)

其中ov:伪元素,是否要获取伪元素属性值。如hover,active,link等属性。如果不想获取这些伪元素的属性值请填写为null。

一 个HTMLElement的style属性是一个可读可写的CSS2Properties对象,就好像CSSRule对象的style属性一样。不 过,Window.getComputedStyle() 的返回值是一个CSS2Properties对象,其属性是只读的。

什么是CSS2Properties 对象?具体参考:http://www.w3school.com.cn/

当要读取具体某个css属性时必须使用getPropertyValue或getPropertyCSSValue。

至于getPropertyValue和getPropertyCSSValue有什么区别,getPropertyValue返回的是一个string,而getPropertyCSSValue返回的是一个CSS2Properties对象。可以参考:https://developer.mozilla.org/en/DOM/window.getComputedStyle

例如,下面两个getStyle的输出结果是一样的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试getPropertyCSSValue</title>
<style type="text/css">
#elem {
 position:absolute;
 top:200px;
 left:100px;
 height:100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
 getStyle();
}
/*function getStyle(){
 var container = document.getElementById("elem");
 var str = window.getComputedStyle(container,null).getPropertyValue("height");
 document.getElementById("output").innerHTML = str;
}*/
/*function getStyle(){
 var container = document.getElementById("elem");
 var str = window.getComputedStyle(container,null).getPropertyCSSValue("top").cssText;
 document.getElementById("output").innerHTML = str;
}*/
</script>
</head>

<body>
<div id="elem">dummy</div>
<div id="output"></div>
</body>
</html>

 3.style、currentStyle、getComputedStyle区别介绍  (http://www.cnblogs.com/flyjs/archive/2012/02/20/2360502.html)


样式表有三种方式

内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。

内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。

外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到 XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。

 

解决方案:引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的!

runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!

currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top

要兼容FF,就得需要getComputedStyle 出马了

注意: getComputedStyle是firefox中的, currentStyle是ie中的. 比如说

1
2
3
4
5
<style>
#mydiv {
     width : 300px;
}
</style>

则:

1
2
3
4
5
6
7
8
var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
      var width = mydiv.currentStyle['width'];
      alert('ie:' + width);
} else if(window.getComputedStyle) {
      var width = window.getComputedStyle(mydiv , null)['width'];
      alert('firefox:' + width);
}

另外在FF下还可以通过下面的方式获取

1
2
document.defaultView.getComputedStyle(mydiv,null).width;
window.getComputedStyle(mydiv , null).width;