Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как получить размер блока сразу после изменения его содержимого? (https://javascript.ru/forum/events/11848-kak-poluchit-razmer-bloka-srazu-posle-izmeneniya-ego-soderzhimogo.html)

Cooskon 16.09.2010 22:01

Как получить размер блока сразу после изменения его содержимого?
 
Задача: изменить содержимое блока и тут же получить его новую высоту, например, в переменную height. Если делать так:
elem.innerHTML="text";
var height=elem.clientHeight;

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

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

Cooskon 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 17.09.2010 14:02

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

рони 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 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 17.09.2010 15:19

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

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

Cooskon 17.09.2010 16:15

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

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

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


Часовой пояс GMT +3, время: 19:53.