js设置css和获取css的方法

今天写代码，使用 ele.style.height  获取div的高度height值时出现错误:

错误代码：

<div id="div1"></div>

#div{

width:100px;

}

var  aa=document.getElementById("div1");

var x=aa.style.width;

alert(x); //弹出的框什么都没有

 

 

分析：通过js获取容器宽高度时：

当宽高都写在样式表里，通过aa.style.width拿不到宽度，而通过aa.offsetWidth才可以获取到宽度

当宽和高是写在行内中，比如style="width:120px;"，这种情况通过上述2个方法都能拿到宽度。

通过js设置容器宽高度：

var  aa=document.getElementById("div1");

var  y=aa.offsetWidth;

aa.style.width=y+"px";

总结：

ele.style.attr：该方法只能获取到行内样式,获取不了外部的样式.  一般用来设置css样式； 如果去获取行内没有的样式,返回的是空值;     允许设置（比如）： ele.style.width="值";

currentStyle属性和getComputedStyle属性不能设置属性,只能获取

currentStyle:该属性只兼容IE,不兼容火狐和谷歌

 写法:ele.currentStyle["attr"]；     或者ele.currentStyle.attr;

getComputedStyle:该属性是兼容火狐谷歌,不兼容IE

写法:window.getComputedStyle(ele,null)[attr]  ；或者是window.getComputedStyle(ele,null).attr

说明:在IE中获取到的颜色是16进制的,在火狐谷歌中获取的颜色是rgb模式的