js 设置 获取css样式

先看一段代码,为了体现一会下面说的js用style获取css样式的不同

js 设置 获取css样式

一:给div设置margin-left(用style设置css样式没什么问题)

box.style.marginLeft="20px";

二:通过style获取div的css属性

  上面的例子用三种形式给div设置了样式

   1:行间样式 直接写到标签中

   2:内联样式 写到head头中

   3:外联样式,用link加载

   js 设置 获取css样式

分别获取,这三种形式设置的样式

console.log(box.style.width);
console.log(box.style.fontSize);
console.log(box.style.color);

运行如下:前两个都没有获取到,都是空

js 设置 获取css样式

总结:所以用style获取css样式,只能获取到写到标签内的样式。

三:但是可以通过getComputedStyle方法 获得

  document.defaultView是个只读对象,返回当前document对象所关联的window对象,没有返回null,(IE9以下不支持),里面的getComputedStyle()方法

  getComputedStyle()两个参数,一是元素,而是伪类,如果没有伪类,则为null

var computedStyle = document.defaultView.getComputedStyle(box,null);

  返回的是box元素所有样式的一个对象

js 设置 获取css样式

此时你在获取

console.log(computedStyle.width);
console.log(computedStyle.fontSize);
console.log(computedStyle.color);

得到可以得到了js 设置 获取css样式哈哈哈,还没结束,因为IE9以下不支持getComputedStyle

IE9以下用currentStyle

box.currentStyle

返回的也是对象,同document.defaultView.getComputedStyle相似,所有这么写

var computedStyle= box.currentStyle?box.currentStyle:document.defaultView.getComputedStyle(box,null);
alert(computedStyle.width);

js 设置 获取css样式js 设置 获取css样式

加油!

上一篇:简单验证码的识别:Bitmap类的使用


下一篇:java工具类,在Windows,Linux系统获取电脑的MAC地址、本地IP、电脑名