JS基础(获取元素样式)
获取元素的当前显示的样式
语法：元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式
currentStyle只有IE浏览器支持，其他的浏览器都不支持
在其他浏览器中可以使用
getComputedStyle（）这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
需要两个参数
getComputedStyle(要获取样式的元素,伪元素)
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象.样式名来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值
比如：没有设置width，它不会获取到auto，而是一个长
通过currentstyle和getComputedStyle（）读取到的样式都是只读的，
不能修改，如果要修改必须通过style属性
没有定义的同时没指定对象浏览器为把这个值当成变量，变量未定义会报错，
而给了对象这个值就是属性，属性未定义就是undefined
获取对应元素样式的兼容性代码：
<style> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script> window.onload=function(){ var box1=document.getElementById('box1'); /* *定义一个函数,用来获取指定元素的当前的样式 * 参数：obj * 要获取样式的元素 * name * 要获取的样式名 */ function getStyle(obj,name){ // if(window.getComputedStyle) // { // //正常浏览器的方式,具有getComputedStyle()方法 // return getComputedStyle(obj,null)[name]; // } // else // { // //IE8的方式,没有getComputedStyle()方法 // return obj.currentStyle[name]; // } return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]; } alert(getStyle(box1,"width")); } </script> </head> <body> <div id="box1"></div> </body>
