标签：load lang asc tco com back script 样式 get
如果是行间样式我们可以直接用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的使用
标签：load lang asc tco com back script 样式 get
原文地址：http://www.cnblogs.com/wjaaron/p/6747747.html
