js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

一、style,currentStyle和getComputedStyle的区别

<script>

 function getStyle(obj, attr)  

{  

    if(obj.currentStyle)  

    {  

       return obj.currentStyle[attr];  //只适用于IE

    }  

    else  

    {  

       return getComputedStyle(obj,false)[attr];   //只适用于FF,Chrome,Safa

    }  

    return obj.style[attr]; //本人测试在IE和FF下没有用,chrome有用

}  

</script>

 window.onload=function()  

{  

    var oDiv=document.getElementByIdx_x('p1');  

    //alert(getStyle(oDiv,'width'));

    alert(getStyle(oDiv,'margin-left'));

} 

//查询了相关资料发现问题如下：

//style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。  （这里我测试的在IE和FF下没有用，Chrome下有用，所有有歧义）

//currentStyle可以弥补style的不足，但是只适用于IE。

//getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。

 

//注意：

//currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。

//如果要设置相应值，应使用style。

 

</script>

</body>

</html>

 

二、获取css操作方法

1.用JS修改标签的 class 属性值：document.getElementByIdx_x( "tt" ).className = "txt"; 

2.用JS修改标签的 style 属性值：document.getElementByIdx_x( "t2" ).style.color = "red";