重温JavaScript获取CSS样式的方法（兼容各浏览器）

众所周知，CSS样式有三种类型：行内样式、内部样式和外部样式，JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法。

一、行内样式获取相对简单，通过element.style.attr（元素.style.属性）即可获取，示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JavaScript获取CSS样式</title>
 6 </head>
 7 <body>
 8     <!-- 给p标签设置行内样式并添加点击事件 -->
 9     <p style='width: 200px;height: 100px;background: pink' onclick='show()'>博客园--开发者的网上家园</p>
10     <script type="text/javascript">
11         function show() {
12             var obj = document.getElementsByTagName('p')[0];
13             alert(obj.style.width);
14         }
15     </script>
16 </body>
17 </html>