如何javascript获取css中的样式

obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢?

首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是:目前的样式.也就是加载css文件后取出来的样式.

currentStyle的用法是:元素.currentStyle.属性名

下面我们开始获取如图div的width样式,那我们就需要这样写:

var w=document.getElementById('div').currentStyle.width;

alert(w);

在IE下调试,看是不是可以得到正确的宽度了

IE可以了然后我们换个火狐试试,无论我怎么刷新都没有弹出我希望的200px,f12调试一下,原来如此,火狐不支持currentStyle方法.

火狐和Chrome支持的是另外一个方法:getComputedStyle,大概意思就是获取完成的样式.

用法:getComputedStyle(元素,false).属性名

同2,我们的代码应该这样写:

var w=getComputedStyle(document.getElementById('div1'),false).width;

alert(w);

现在不报错了,也能正常的获取了

经过修改，我就完成了最终代码

    var div = document.getElementById("div");
    div.addEventListener("click",function(){
        try{
            //非IE浏览器
            alert(getComputedStyle(div,false).width);
        }catch(ew){
            //IE浏览器使用方式
            alert(div.currentStyle.width);
        }
    },false);