Можно ли средствами 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, время: 06:02. |