-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #Div2{width:100px;height:100px; background:black;} </style> <script type="text/javascript"> window.onload=function(){ //获取行间样式 var oDiv=document.getElementById("Div"); alert(oDiv.style.background); //获取非行间样式 ，不可行方案 var oDiv2=document.getElementById("Div2"); // alert(oDiv2.style.background);/用此种方法;是无法获取非行间样式的;* //获取非行间样式 方法，currentStyle是IE中的属性，getComputedStyle是其他浏览器的方法（注意其有两个参数）；在非行间样式中，style属性只能去赋值，在行间样式中才能去获取样式； function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return window.getComputedStyle(obj,false)[attr]; } } alert(getStyle(oDiv2,"background")) ; } </script> </head> <body> <div id="Div" style="100px ;height: 100px; background: red;"></div> <div id="Div2"></div> </body> </html>
getStyle 函数有 2 个参数，第一个参数 obj 为要获取的对象，第二个参数 name 为要获取的属性，并且做了兼容处理，currentStyle 针对 IE 浏览器，getComputedStyle 针对火狐浏览器。