当前位置： 移动技术网 > IT编程>网页制作>CSS > 获取元素CSS样式

获取元素CSS样式

2019年02月23日  | 移动技术网IT编程  | 我要评论

火影控魂师,辰东的全部作品,胡允儿

 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>

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网