Форум

Cooskon · #1 (**permalink**) 16.09.2010, 22:01

Задача: изменить содержимое блока и тут же получить его новую высоту, например, в переменную height. Если делать так:

elem.innerHTML="text";
var height=elem.clientHeight;

то clientHeight получается той же, что была у элемента до изменения содержимого.

Причины этого понятны, но как же в этом случае получить высоту элемента? setTimeout(function() { height=elem.clientHeight; },t); в этом случае работает, но не подходит, да и само по себе не лучшее решение.

Cooskon · #2 (**permalink**) 17.09.2010, 13:47

Ну ответьте же, пожалуйста, очень надо.

Что примечательно, в jQuery вызовом $(elem).height() всё работает. Там, где $(elem).height() возвращает правильную высоту, elem.clientHeight возвращает 0. Такая проверка сразу же после изменения elem.innerHTML, например:

console.log($(elem).height()+" "+elem.offsetHeight+" "+elem.clientHeight+" "+elem.scrollHeight);
// Пишет в консоль: правильнаяВысота 0 0 0

Смотрел $().height — там тоже используются (client|offset|scroll)Height, но большую часть каши из кода функции до конца переварить не удалось.

Kolyaj · #3 (**permalink**) 17.09.2010, 14:02

offsetHeight правильный? Если да, то попробуйте брать clientHeight после обращения к offsetHeight.

рони · #4 (**permalink**) 17.09.2010, 14:10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
<div id="elem"></div>
<script language="JavaScript" type="text/javascript">
var elem = document.getElementById('elem');
var height_old = elem.offsetHeight;
elem.innerHTML="text";
var height = elem.offsetHeight;
alert(height_old+' '+height);
</script>
</body>
</html>

Cooskon · #5 (**permalink**) 17.09.2010, 14:19

Сообщение от Kolyaj

offsetHeight правильный? Если да, то попробуйте брать clientHeight после обращения к offsetHeight

Нет же, (client|offset|scroll)Height неправильные, jQuery(elem).height() правильный.

Сообщение от рони

var elem = document.getElementById('elem');
var height_old = elem.offsetHeight;
elem.innerHTML="text";
var height = elem.offsetHeight;
alert(height_old+' '+height);

У меня в коде написано практически идентично. Ваш пример на сайте при просмотре работает, у меня в приложении - нет (Firefox, Chrome последних версий).

Этот код стоит в обработчие oncontextmenu элемента (не того, по которому кликают, а другого), если это что-то меняет.

Cooskon · #6 (**permalink**) 17.09.2010, 15:19

А, чёрт с ним : ( Поместил получение значения и все операции со значением высоты в этом месте под setTimeout(fucntion(){},1). Уродливо, но что поделать.

Ох, как бы потом не получить чего неприятного в этой части кода.

Cooskon · #7 (**permalink**) 17.09.2010, 16:15

Ура, проблема решена : )

Элемент был с display:none, когда я пытался получить его размер, и сразу же после этого получал display:block. Как-то не задумывался раньше, изменяются ли значения переменных размера у элемента, когда у него display:none.

Всем спасибо.

Форум

Справочник

Discord чат

Курсы javascript