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>