获取元素当期样式表样式
语法:元素.currentStyle.样式名 -------------读取当前元首正在显示的样式
currentStyle:只有ie浏览器支持,其他浏览器不支持
getComputedStyle(box1).width/windows的方法,其他浏览器不支持
getComputedStyle((box1,null).backgroundColor) ;不支持ie8及以下浏览器
alert(getComputedStyle(box1,null).width);
var obj=getComputedStyle(box1,null);
alert(obj.width)
第一个参数:获取的样式元素
第二个参数:传递伪元素,一般为null
该方法返回了一个对象,对象中封装了当前元素对应的样式,可以通过对象.样式名来读取样式
如果获取的样式没有设置,则会获取真实值,而不是默认值
比如:没有设置width,他不会获到auto,而是一个长度
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
var obj=getComputedStyle(box1,null);
alert(obj.width)
};
window.onload = function() {
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
box1.style.width = "300px";
box1.style.backgroundColor = "red";};
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
alert(getComputedStyle(box1).width);
alert(getComputedStyle(box1).backgroundColor);
};
}
解决:js获取样式的兼容性问题:中括号取得对象中的属性:判断浏览器是否具有此方法
getComputedStyle---------是变量 如果找不着会报错
window.getComputedStyle---是属性,找不着返回undefined
//obj获取的元素 name 样式名 function getStyle(obj,name){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[name];//正常 } return obj.currentStyle[name];//IE8 }