- 用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。
- currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE。
- getComputedStyle同currentStyle作用相同,但是适用于FF、opera、safari、chrome。
注意:
- currentStyle和getComputedStyle只能用于获取页面元素的样式,不能用来设置相关值。
- 如果要设置相应值,应使用style。
兼容方法如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js用currentStyle和getComputedStyle获取css样式</title> <style type="text/css"> #div1{width:200px; height:200px; background:red;} </style> <script type="text/javascript"> function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; //只适用于IE } else { return getComputedStyle(obj,false)[attr]; //适用于FF,Chrome,Safa } } window.onload=function() { var oDiv=document.getElementById('div1'); alert(getStyle(oDiv,'width')) } </script> </head> <body> <div id="div1" style="100px;"></div> </body> </html>