JavaScript获取非行间样式之currentStyle，getComputedStyle的使用

Posted 2020-09-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript获取非行间样式之currentStyle，getComputedStyle的使用相关的知识，希望对你有一定的参考价值。

如果是行间样式我们可以直接用style来获取，但是如果是非行间样式，则style不起作用了，这里需要用到新的语法了。

1.currentStyle

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7     #div1{width: 200px;height: 200px;background-color: red;}    
 8 </style>
 9 <script type="text/javascript">
10     window.onload=function(){
11         var oDiv=document.getElementById("div1");
12         alert(oDiv.currentStyle.width);  //在这里应用currentStyle
13     }
14 </script>
15 </head>
16 <body>
17 <div id="div1"></div>    
18 </body>
19 </html>

如上所示就是currentStyle的使用方法，跟style一样，但是要注意的是，currentStyle仅兼容IE。

currentStyle只能在IE使用，所以我们在其他浏览器还需要另外的方法获取样式。

2.getComputedStyle

我们将上面的弹出代码换成

alert(getComputedStyle(oDiv,null).width);

就可以使这段代码在谷歌，火狐等浏览器上运行了。其中getComputedStyle的第二个参数，也就是null可以任意替换，不影响。值得注意的是，getComputedStyle在老版IE中也是不兼容的。

为了在所有浏览器中都可以获取样式，可以作如下改动：

 1 window.onload=function(){
 2             var oDiv=document.getElementById("div1");
 3             //alert(getComputedStyle(oDiv,null).width);
 4             if (oDiv.currentStyle) {
 5                 alert(oDiv.currentStyle.width);
 6             }
 7             else{
 8                 alert(getComputedStyle(oDiv,null).width);
 9             }
10         }

以上是关于JavaScript获取非行间样式之currentStyle，getComputedStyle的使用的主要内容，如果未能解决你的问题，请参考以下文章

javascript获取非行间样式的方法(可以兼容各个浏览器)