先看一段代码,为了体现一会下面说的js用style获取css样式的不同
一:给div设置margin-left(用style设置css样式没什么问题)
box.style.marginLeft="20px";
二:通过style获取div的css属性
上面的例子用三种形式给div设置了样式
1:行间样式 直接写到标签中
2:内联样式 写到head头中
3:外联样式,用link加载
分别获取,这三种形式设置的样式
console.log(box.style.width); console.log(box.style.fontSize); console.log(box.style.color);
运行如下:前两个都没有获取到,都是空
总结:所以用style获取css样式,只能获取到写到标签内的样式。
三:但是可以通过getComputedStyle方法 获得
document.defaultView是个只读对象,返回当前document对象所关联的window对象,没有返回null,(IE9以下不支持),里面的getComputedStyle()方法
getComputedStyle()两个参数,一是元素,而是伪类,如果没有伪类,则为null
var computedStyle = document.defaultView.getComputedStyle(box,null);
返回的是box元素所有样式的一个对象
此时你在获取
console.log(computedStyle.width); console.log(computedStyle.fontSize); console.log(computedStyle.color);
得到可以得到了哈哈哈,还没结束,因为IE9以下不支持getComputedStyle
IE9以下用currentStyle
box.currentStyle
返回的也是对象,同document.defaultView.getComputedStyle相似,所有这么写
var computedStyle= box.currentStyle?box.currentStyle:document.defaultView.getComputedStyle(box,null); alert(computedStyle.width);
加油!