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模式的

猜你喜欢

转载自blog.csdn.net/kalinux/article/details/81913019