Подтвердить что ты не робот

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

Есть ли способ получить высоту элемента до добавления его в 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)
    }

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

4b9b3361

ОТВЕТЫ

Ответ 1

Элементы не имеют высоты в каком-либо реальном смысле, пока не будут добавлены в 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 (поэтому их размеры должны быть рассчитаны), но на самом деле не могут быть видны пользователю.