defaultView与currentStyle的区别

defaultView与currentStyle的区别_获取CSS样式值

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>测试</title>
 6     <style type="text/css">
 7     .btn1{
 8         color:red;
 9     }
10     </style>
11 </head>
12 
13 <body>
14     <button id="btn1" class="btn1">点我</button>
15 
16 </body>
17 <script type="text/javascript">
18      var getCSS = function(obj, v) {
19         var _style = obj.style;
20         if (_style[v]) return _style[v];
21         if (obj.currentStyle) return obj.currentStyle[v];//兼容IE7-IE11；不兼容chrome、firefox、safari、opera
22         if (document.defaultView && document.defaultView.getComputedStyle) {//兼容IE9-IE11、chrome、firefox、safari、opera；不兼容IE7-IE8
23             v = v.replace(/([A-Z])/g, "-$1").toLowerCase(); //这里要把类似backgroundColor转为background-color，因为这里使用传统的"text-Align"风格的规则书写方式，而不是"textAlign"
24             var s = document.defaultView.getComputedStyle(obj, "");
25             return s && s.getPropertyValue(v);
26         }
27         return null;
28     };
29 
30     alert(getCSS(document.getElementById("btn1"),"color"));
31 
32 
33 </script>
34 </html>