将Div滑动到自动高度

时间:2010-09-10 21:33:10

标签: javascript html height slide

我有一个我滑入和滑出的div。 要做到这一点,我只需每秒将高度增加2px,直到高度为0的预设高度。

无论如何确定div的内容高度,因为内容是不可预测的高度,考虑到div的起始属性是display:none和height:0?

谢谢。

1 个答案:

答案 0 :(得分:4)

诀窍是暂时显示它,测量高度,然后再次隐藏它。如果您使用visibility:hidden和position:absolute,则在执行此操作时不会更改页面布局。

function getElementHeight(el)
{
    var styles = {
        visibility: el.style.visibility,
        height: el.style.height,
        position: el.style.position,
        display: el.style.display
    };
    el.style.visibility = "hidden";
    el.style.height = "auto";
    el.style.position = "absolute";
    el.style.display = "block";
    var height = el.offsetHeight;
    el.style.display = styles.display;
    el.style.position = styles.position;
    el.style.height = styles.height;
    el.style.visibility = styles.visibility;
    return height;
}

如果你想得到样式高度应该是什么,你可以在var height = el.offsetHeight;之后添加这两行:

el.style.height = height + "px";
height += (height - el.offsetHeight);