GetStyle By CSS

浏览数：73 / 时间：2015年06月09日

　　我们知道通过

　　　　document.getElementById("argument"); //argument（元素）;

　　　　value = argument.style.width;的方式可以轻松获取或者读写该argument的样式（宽度）。但是我们知道这个属性是在<HMTL>标签中的，那么如果我们argument的样式写在CSS中呢？我们就需要用别的方法来获取它的样式值.那么，我们就要用到

　　　　getComputedStyle("argument",":after") .width //谷歌、火狐等非IE内核浏览器

　　　　argumet.currentStyle.width //IE浏览器获取样式

　　　　这两种方法来获取CSS文件中的样式值。那么我们可以通过下面的方法来判别浏览器以及获取并return出我们要的值。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>GetStyle</title>
 7 <meta name="description" content="">
 8 <meta name="keywords" content="">
 9 <link href="" rel="stylesheet">
10 <style>
11     .box{
12         width: 200px;
13         background: gray;
14     }
15 </style>
16 </head>
17 <body>
18     <div class="box" id="box" style="height:200px">
19         
20     </div>
21 </body>
22 <script>
23     var obox = document.getElementById("box");
24     function getStyle (ele,prop) {
25         var value;
26         if(prop in document.body.style){
27             if(window.getComputedStyle){
28                 value = getComputedStyle(ele,null)[prop];
29             }else{
30                 value = obox.currentStyle.width;
31             }    
32         }else{
33             value = ele.style[prop];
34         }
35         value = parseFloat(value);
36         return value;
37     }
38     alert(getStyle(obox,"width"));
39     alert(getStyle(obox,"height"));
40 </script>
41 </html>

　　　　经过网上查询(原文地址:http://blog.163.com/hongshaoguoguo@126/blog/static/180469812013217101436660/)

　　　　　　了解到getComputedStyle与style的区别

　　　　　　　　1、只读与可写

　　　　　　　　getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写。

　　　　　　　　2、获取的对象范围

　　　　　　getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而　　element.style只能获取元素style属性中的Style样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

　　　　　　　　　　　　getComputedStyle与currentStyle

　　　　　　currentStyle是IE浏览器自己的一个属性，其与element.style可以说是近亲，至少在使用形式上类似，element.currentStyle，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）。

因此，从作用上将，getComputedStyle方法与currentStyle属性走的很近，形式上则style与currentStyle走的近。不过，currentStyle属性貌似不支持伪类样式获取，这是与getComputedStyle方法的差异，也是jQuery css()方法无法体现的一点。

　　　　　　　　　　　　getPropertyValue方法

　　　　　　getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称），例如：

　　　　　　　　window.getComputedStyle(element, null).getPropertyValue("float");

　　　　　　用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");

　　　　　　兼容性:getPropertyValue方法IE9+以及其他现代浏览器都支持，对于IE6-8有另外一套方案

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

GetStyle By CSS