获取DOM元素的真实高度和宽度

Supersha — Fri, 01 Jan 2010 06:03:21 +0000

以前在做动画脚本的时候，遇到过这样的一个问题：当DOM元素display:none;之后，你将得不到它的实际高度和宽度。这个在fadein等类似效果的时候就有些问题了。这个问题困扰了一些时间，最后觉得还是元素隐藏导致的结果，因此采用了这样的方法：将隐藏的元素的display暂时设置为block，获取到真实的高度和宽度之后，再还原隐藏元素。下面是我封装好的获取元素的真实高度和宽度的对象：

[javascript]
var Style = {
//获取元素最终的样式
getFinalStyle: function(elem, css){
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[css];
} else if (elem.currentStyle) {
return elem.currentStyle[css];
} else {
return elem.style[css];
}
},
height: function(elem){
if (this.getFinalStyle(elem, "display") !== "none") {
return elem.offsetHeight || elem.clientHeight;
} else {
//获取隐藏掉的函数的高度，先让它显示，获取到高度之后再隐藏，下同
elem.style.display = "block";
var h = elem.offsetHeight || elem.clientHeight;
elem.style.display = "none";
return h;
}
},
width: function(elem){
if (this.getFinalStyle(elem, "display") !== "none") {
return elem.offsetWidth || elem.clientWidth;
} else {
elem.style.display = "block";
var w = elem.offsetWidth || elem.clientWidth;
elem.style.display = "none";
return w;
}
}
};

//Usage：
onload = function(){
alert(Style.height(document.getElementById("div")));
}
[/javascript]

西红柿爱番茄 » display

获取DOM元素的真实高度和宽度