Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.08.2011, 12:50
Интересующийся
Отправить личное сообщение для ацкий Посмотреть профиль Найти все сообщения от ацкий
 
Регистрация: 23.08.2011
Сообщений: 28

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

Если конкретнее, то мне нужно узнать высоту страницы (body), не загряжая ее в браузер (чтобы ресурсы не тратились). Зачем так? Просто чтобы установить максимальное значение скролбара, затем разбить страницу дивами на блоки, и подгружать эти блоки в браузер (точнее загрузив все сразу, и изменяя по очереди hidden на false). Нужно, чтобы скролбар не масштабировался по мере прокрутки, а имел заранее нужную длину.
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2011, 12:58
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

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

Сообщение от ацкий
Если конкретнее, то мне нужно узнать высоту страницы (body), не загряжая ее в браузер (чтобы ресурсы не тратились).
Чтобы узнать высоту страницы, браузер должен её отрисовать.
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2011, 15:06
Интересующийся
Отправить личное сообщение для ацкий Посмотреть профиль Найти все сообщения от ацкий
 
Регистрация: 23.08.2011
Сообщений: 28

Хм, так прежде чем браузер ее нарисует, он как-то рассчитывает положение элементов? Или все делается на лету?
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2011, 15:27
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

глупый вопрос!
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, 23.08.2011 в 15:34.
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2011, 15:35
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

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.

Последний раз редактировалось B@rmaley.e><e, 23.08.2011 в 15:38.
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2011, 16:06
Интересующийся
Отправить личное сообщение для ацкий Посмотреть профиль Найти все сообщения от ацкий
 
Регистрация: 23.08.2011
Сообщений: 28

Сделал так:
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. Что это?
Ответить с цитированием
  #7 (permalink)  
Старый 24.08.2011, 17:49
Интересующийся
Отправить личное сообщение для ацкий Посмотреть профиль Найти все сообщения от ацкий
 
Регистрация: 23.08.2011
Сообщений: 28

Может быть есть какой способ без отображения. Эдакая предъобработка без вывода на экран?
Ответить с цитированием
  #8 (permalink)  
Старый 24.08.2011, 18:07
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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


нуль!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск в строке другой подстроки средствами JS YAN Общие вопросы Javascript 13 23.07.2013 08:41
Можно ли узнать назначенные события MainBuh Events/DOM/Window 4 17.08.2010 10:22
Можно ли сделать выбор имени запускаемого js скрипта из <select> super28 Общие вопросы Javascript 6 12.12.2009 21:22
Можно ли узнать откуд кликнут onclick? GetElementById Events/DOM/Window 1 07.04.2009 20:18
Можно ли менять свойство NAME элемента? MaxTula Элементы интерфейса 6 09.02.2009 10:55