<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>计算元素样式</title> <style type="text/css"> #myDiv { background-color: blue; width: 100px; height: 200px; } </style> </head> <body> <div id="myDiv" style="background-color: red; border: 1px solid black"> </div> <script type="text/javascript"> var myDiv = document.getElementById("myDiv"); alert(getStyle(myDiv,"backgroundColor"));//"red" 或 rgb(255,0,0) alert(getStyle(myDiv,"width")); //"100px" alert(getStyle(myDiv,"height")); //"200px" alert(getStyle(myDiv,"border")); //在某些浏览器中是“1px solid black” //var computedStyle = document.defaultView.getComputedStyle(myDiv, null); //alert(computedStyle.backgroundColor); //"red" //alert(computedStyle.width); //"100px" //alert(computedStyle.height); //"200px" //alert(computedStyle.border); //在某些浏览器中是“1px solid black” //获取DOM的style属性 function getStyle(obj,attr) { if(obj.currentStyle) //用于IE { return obj.currentStyle[attr]; } else { // document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法 return document.defaultView.getComputedStyle(myDiv, null)[attr]; //getComputedStyle DOM1中的方法 //return getComputedStyle(obj,false)[attr]; } } </script> </body> </html>