Можно ли средствами JS узнать высоту скрытого элемента?
Привет всем!
Можно ли средствами JS узнать высоту скрытого элемента, если к нему применен атрибут hidden? Размеры вьюпорта известны, элемент и его содержимое тоже известны. Если конкретнее, то мне нужно узнать высоту страницы (body), не загряжая ее в браузер (чтобы ресурсы не тратились). Зачем так? Просто чтобы установить максимальное значение скролбара, затем разбить страницу дивами на блоки, и подгружать эти блоки в браузер (точнее загрузив все сразу, и изменяя по очереди hidden на false). Нужно, чтобы скролбар не масштабировался по мере прокрутки, а имел заранее нужную длину. |
Если элемент скрыт, у него нет высоты.
Цитата:
|
Хм, так прежде чем браузер ее нарисует, он как-то рассчитывает положение элементов? Или все делается на лету?
|
глупый вопрос!
var element = document.getElementById(id_element); Или же другой способ выделить элемент: var element = document.getElementsByTagName(tag_element)[elem_num]; var element = document.getElementsByClassName(class_element)[elem_num]; Узнать высоту вот так: window.getComputedStyle(element,null).getPropertyValue("height"); Пример:
document.addEventListener("DOMContentLoaded",function(){
var hs = [];
var elems = document.getElementsByClassName("divs");
for(i=0;i<elems.length;i++){
hs[i] = window.getComputedStyle(elems[i],null).getPropertyValue("height");
}
},false);
|
Solovei95, ещё более глупый ответ.
<div id="element" hidden>
<div> lalala </div>
</div>
<style>
#element div {height: 200px; margin: 10px; padding:10px; border:3px solid red}
</style>
<script>
alert(window.getComputedStyle(document.getElementById("element"),null).getPropertyValue("height"));
</script>
P.S. Смотреть, конечно, в браузере, понимающем атрибут hidden. |
Сделал так:
var height = 0;
function pageHeight()
{
var blocks = document.getElementsByClassName("block");
for(i=0;i<blocks.length;i++)
{
height += window.getComputedStyle(blocks[i],null).getPropertyValue("height");
}
alert(height);
}
Выдал auto. Что это? |
Может быть есть какой способ без отображения. Эдакая предъобработка без вывода на экран?
|
из примера B@rmaley.e><e
<div id="element" hidden>
<div> lalala </div>
</div>
<style>
#element div {height: 200px; margin: 10px; padding:10px; border:3px solid red}
</style>
<script>
alert(document.getElementById("element").getBoundingClientRect().height);
</script>
нуль! |
| Часовой пояс GMT +3, время: 05:54. |