Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Можно ли средствами JS узнать высоту скрытого элемента? (https://javascript.ru/forum/misc/20937-mozhno-li-sredstvami-js-uznat-vysotu-skrytogo-ehlementa.html)

ацкий 23.08.2011 13:50

Можно ли средствами JS узнать высоту скрытого элемента?
 
Привет всем!
Можно ли средствами JS узнать высоту скрытого элемента, если к нему применен атрибут hidden? Размеры вьюпорта известны, элемент и его содержимое тоже известны.

Если конкретнее, то мне нужно узнать высоту страницы (body), не загряжая ее в браузер (чтобы ресурсы не тратились). Зачем так? Просто чтобы установить максимальное значение скролбара, затем разбить страницу дивами на блоки, и подгружать эти блоки в браузер (точнее загрузив все сразу, и изменяя по очереди hidden на false). Нужно, чтобы скролбар не масштабировался по мере прокрутки, а имел заранее нужную длину.

Kolyaj 23.08.2011 13:58

Если элемент скрыт, у него нет высоты.

Цитата:

Сообщение от ацкий
Если конкретнее, то мне нужно узнать высоту страницы (body), не загряжая ее в браузер (чтобы ресурсы не тратились).

Чтобы узнать высоту страницы, браузер должен её отрисовать.

ацкий 23.08.2011 16:06

Хм, так прежде чем браузер ее нарисует, он как-то рассчитывает положение элементов? Или все делается на лету?

Solovei95 23.08.2011 16:27

глупый вопрос!
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);

B@rmaley.e><e 23.08.2011 16:35

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.

ацкий 23.08.2011 17:06

Сделал так:
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. Что это?

ацкий 24.08.2011 18:49

Может быть есть какой способ без отображения. Эдакая предъобработка без вывода на экран?

melky 24.08.2011 19:07

из примера 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.