首页 > 代码库 > GetStyle By CSS
GetStyle By CSS
我们知道通过
document.getElementById("argument"); //argument（元素）;
value = http://www.mamicode.com/argument.style.width;的方式可以轻松获取 或者读写该argument的样式（宽度）。但是我们知道这个属性是在
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 = http://www.mamicode.com/getComputedStyle(ele,null)[prop];29 }else{30 value =http://www.mamicode.com/ obox.currentStyle.width;31 } 32 }else{33 value =http://www.mamicode.com/ ele.style[prop];34 }35 value =http://www.mamicode.com/ 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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。