js 设置 获取css样式

先看一段代码，为了体现一会下面说的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);

加油！