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

已有 4 个手印

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

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")));
}