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

程序员文章站 2023-01-02 11:45:03

众所周知，CSS样式有三种类型：行内样式、内部样式和外部样式，JavaScript获取CSS样式时分为两种情况：行内样式获取法和非行内样式获取法。一、行内样式获取相对简单，通过element.style.attr（元素.style.属性）即可获取，示例：运行：通过element.styl ......

众所周知，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>

运行：

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