获取元素CSS样式 - 码农教程

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>获取css样式</title>
 9 </head>
10 <style>
11     #box{
12         position: absolute;
13         left: 50%;
14         top: 100px;
15         background-color: #fff000;
16         color: blueviolet;
17         font-size: 2em;
18         font-weight: bolder;
19         text-align: center;
20         width: 300px;
21         height: 100px;
22         line-height: 100px;
23         font-style: italic;
24     }
25 </style>
26 <body>
27     <div id="box">ProsperLee</div>
28     <pre>
29         #box{
30             position: absolute;
31             left: 50%;
32             top: 100px;
33             background-color: #fff000;
34             color: blueviolet;
35             font-size: 2em;
36             font-weight: bolder;
37             text-align: center;
38             width: 300px;
39             height: 100px;
40             line-height: 100px;
41             font-style: italic;
42         }
43     </pre>
44     <script>
45         /**
46          * 获取css样式
47          * ele 元素
48          * prop 属性名
49          **/
50         function getStyle(ele, prop) {
51             if (window.getComputedStyle) {
52                 return window.getComputedStyle(ele, null)[prop];
53             } else {
54                 return ele.currentStyle[prop];
55             }
56         }
57         var el = document.getElementById('box');
58         console.log('position：' + getStyle(el,'position')); // absolute
59         console.log('left：' + getStyle(el,'left')); // 488.5px
60         console.log('font-size：' + getStyle(el,'font-size')); // 32px
61         console.log('font-style：' + getStyle(el,'font-style')); // italic
62         console.log('max-width：' + getStyle(el,'max-width')); // none
63         console.log('bottom：' + getStyle(el,'bottom')); // 532px
64     </script>
65 </body>
66 
67 </html>