Скользящий Div для автоматической высоты - PullRequest
Новая
       8

Скользящий Div для автоматической высоты

1 голос
/ 11 сентября 2010

У меня есть div, который я вставляю и вынимаю. Для этого я просто увеличиваю высоту на 2 пикселя каждую секунду до заданной высоты с высоты 0.

Можно ли в любом случае определить высоту содержимого div, поскольку содержимое является непредсказуемой высотой, учитывая, что начальные свойства div: display: none и height: 0?

Спасибо.

1 Ответ

4 голосов
/ 11 сентября 2010

Хитрость заключается в том, чтобы временно показать его, измерить высоту и снова скрыть. И если вы используете видимость: скрытый и позиция: абсолютный, это не изменит макет страницы, пока вы это делаете. 

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);
...