Получение высоты элемента перед добавлением в DOM - PullRequest
Новая
       43

Получение высоты элемента перед добавлением в DOM

31 голосов
/ 10 мая 2011

Есть ли способ получить высоту элемента до добавления его в DOM? Я знаю, что clientHeight не работает, как я пытался, и всегда возвращает 0. Существуют ли другие методы, которые могут возвращать высоту, или элемент должен быть частью DOM, чтобы высота была рассчитана?

Это пример того, что я собираюсь сделать: 

function test(a) {
    var a=document.createElement(a)
    a.style.top=(window.innerHeight/2-a.clientHeight/2)+'px' //fixed position in CSS
    document.body.appendChild(a)
    }

* Примечание. Это только упрощенная версия функции, над которой я работаю, чтобы проецировать то, чего я пытаюсь достичь, без всего ненужного беспорядка.

1 Ответ

36 голосов
/ 10 мая 2011

Элементы не имеют высоту, в любом реальном смысле, до тех пор, пока они не будут добавлены в DOM, поскольку их стили не могут быть оценены до тех пор.

Вы можете легко обойти это, используя visibility: hidden, так что элемент может быть добавлен в DOM (и определена его высота), не вызывая видимого мерцания. ( jsFiddle ) 

function test(a) {
    var a=document.createElement(a);
    a.style.visibility = "hidden";
    document.body.appendChild(a);
    a.style.top=(window.innerHeight/2-a.clientHeight/2)+'px';
    a.style.visibility = "";
}

(Это работает при условии, что вы используете top, потому что элемент абсолютно позиционирован или зафиксирован. Если бы это было не так, вам бы пришлось сделать это так временно.) Скрытые элементы по-прежнему занимают место в DOM (поэтому их размеры должны быть рассчитаны), но пользователь не может их увидеть.

...