获取元素的当前显示的样式
语法:元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式
currentStyle只有IE浏览器支持,其他的浏览器都不支持
在其他浏览器中可以使用
getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法,可以直接使用
需要两个参数
getComputedStyle(要获取样式的元素,伪元素)
第一个:要获取样式的元素
第二个:可以传递一个伪元素,一般都传null
该方法会返回一个对象,对象中封装了当前元素对应的样式
可以通过对象.样式名来读取样式
如果获取的样式没有设置,则会获取到真实的值,而不是默认值
比如:没有设置width,它不会获取到auto,而是一个长
通过currentstyle和getComputedStyle()读取到的样式都是只读的,
不能修改,如果要修改必须通过style属性
没有定义的同时没指定对象浏览器为把这个值当成变量,变量未定义会报错,
而给了对象这个值就是属性,属性未定义就是undefined
获取对应元素样式的兼容性代码:
<style> #box1{ 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>