Javascript.RU

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

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

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

Причины этого понятны, но как же в этом случае получить высоту элемента? setTimeout(function() { height=elem.clientHeight; },t); в этом случае работает, но не подходит, да и само по себе не лучшее решение.
Ответить с цитированием
  #2 (permalink)  
Старый 17.09.2010, 12:47
Аватар для Cooskon
Интересующийся
Отправить личное сообщение для Cooskon Посмотреть профиль Найти все сообщения от Cooskon
 
Регистрация: 15.01.2010
Сообщений: 28

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

Что примечательно, в 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, но большую часть каши из кода функции до конца переварить не удалось.

Последний раз редактировалось Cooskon, 17.09.2010 в 12:51.
Ответить с цитированием
  #3 (permalink)  
Старый 17.09.2010, 13:02
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

offsetHeight правильный? Если да, то попробуйте брать clientHeight после обращения к offsetHeight.
Ответить с цитированием
  #4 (permalink)  
Старый 17.09.2010, 13:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,068

<!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>

Последний раз редактировалось рони, 17.09.2010 в 13:12.
Ответить с цитированием
  #5 (permalink)  
Старый 17.09.2010, 13:19
Аватар для Cooskon
Интересующийся
Отправить личное сообщение для Cooskon Посмотреть профиль Найти все сообщения от Cooskon
 
Регистрация: 15.01.2010
Сообщений: 28

Сообщение от 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 в 14:00.
Ответить с цитированием
  #6 (permalink)  
Старый 17.09.2010, 14:19
Аватар для Cooskon
Интересующийся
Отправить личное сообщение для Cooskon Посмотреть профиль Найти все сообщения от Cooskon
 
Регистрация: 15.01.2010
Сообщений: 28

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

Ох, как бы потом не получить чего неприятного в этой части кода.
Ответить с цитированием
  #7 (permalink)  
Старый 17.09.2010, 15:15
Аватар для Cooskon
Интересующийся
Отправить личное сообщение для Cooskon Посмотреть профиль Найти все сообщения от Cooskon
 
Регистрация: 15.01.2010
Сообщений: 28

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

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

Всем спасибо.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM Flash 3 30.11.2010 21:59
Как изменить размер <iframe> в зависимости от размера его содержимого Xslibris Events/DOM/Window 19 18.09.2010 13:52
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM jQuery 0 15.09.2010 01:17
Как получить имя файла и изменить его? nedosalivan Общие вопросы Javascript 5 29.03.2010 16:51
Как сделать окошко с возможностью изменения его содержимого? nolka Элементы интерфейса 2 10.07.2008 07:22