来源:http://www.jb51.net/article/30107.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <style type="text/css"> #dom2{ font-size:20px; height: 20px; background-color: #1B3759; } </style> <link rel="stylesheet" type="text/css" href="css.css" /> <script language="javascript"> function CurrentStyle(element) { return element.currentStyle || document.defaultView.getComputedStyle(element, null); } function GetMessage(idName) { switch(idName) { case "dom1": var a = document.getElementById(idName); alert("1--字体大小:"+a.style.fontSize+"\n高度:"+ a.style.height+"\n背景颜色:"+ a.style.backgroundColor); break; case "dom2": var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules; alert("2--字体大小:"+domcss[0].style.fontSize+"\n高度:"+ domcss[0].style.height+"\n背景颜色:"+ domcss[0].style.backgroundColor); break; case "dom3": dom = document.getElementById("dom3"); alert("3--字体大小:"+ CurrentStyle(dom).fontSize+"\n高度:"+ CurrentStyle(dom).height+"\n背景颜色:"+ CurrentStyle(dom).backgroundColor); break; } } </script> </head> <body> <h2 id="dom1" style="font-size: 20px;height: 20px;background-color: #1B3759" onmouseout="GetMessage(this.id)">测试一:对内联式进行操作</h2> <h2 id="dom2" onmouseover="GetMessage(this.id)">测试二:对嵌入式进行操作</h2> <h2 id="dom3" onmouseover="GetMessage(this.id)">测试三:对链接式进行操作</h2> </body> </html>
外部css.css:
#dom3{ font-size:20px; height: 20px; background-color: #1B3759; }