Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2012, 13:24
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

Изменение свойства CSS
Здравствуйте, уважаемые форумчане.
Проблема, вроде бы простая, но у меня её решить не получается. В JavaScript я не особо силён, поэтому не пинайте сильно.
Есть 2 div блока. У обоих высота не задана, т.е. зависит от количества контента в них. Причём, у одного из блоков высота динамически меняется при нажатии на ссылку в нём. Требуется сделать так, чтобы высота блоков до раскрытия динамического блока была одинаковой (вот хочется заказчику так, и ничего он слушать не хочет).
Я попытался решить проблему следующим образом:
Код:
#contentMenuPersonal
{
	display: block;
	z-index: 10;
	position: relative;
	margin: 80px 10px 30px;
	float: left;
	width: 175px;
}
#bannerBig1
{
	width: 680px;
	z-index: 10;
	position: relative;
	margin: 80px 10px 30px;
	float: left;

}
<script type="text/javascript">
		function change_visibility (block_4_close, block_4_open)
		{
			document.getElementById(block_4_close).style.display='none';
			document.getElementById(block_4_open).style.display='';
		}

		var size = document.getElementById(contentMenuPersonal).style.height;
		
		var dynamicSize = document.getElementById(bannerBig1).style.height;
		
		if (document.getElementById(block_4_close).style.display='none') {dynamicSize = size;}
	</script>

<div id="contentMenuPersonal">
    	    	<table cellspacing="10px" align="center">
               ...текст...
                </table>
          </div>
          <div id="bannerBig1" style="padding: 15px;">
		<div id="r0">
               ...текст...
		<a href="javascript:change_visibility ('r0', 'r1')">Читать далее &rarr;</a>
		</div>
		<div id="r1" style="display: none;">
               ...текст...
        	<a href="javascript:change_visibility ('r1', 'r0')">&larr; скрыть текст</a>
		</div>
         </div>

Но ни в одном из браузеров вообще ничего не произошло.
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2012, 13:29
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Squirr,
var dynamicSize = document.getElementById(bannerBig1).style.height;
if (document.getElementById(block_4_close).style.disp lay='none') {dynamicSize = size;}

красное числовое значение, -а не объект
для объекта - так
Цитата:
var dynObj = document.getElementById(bannerBig1);
if (document.getElementById(block_4_close).style.disp lay='none') {dynObj .style.height = size;}
Ответить с цитированием
  #3 (permalink)  
Старый 05.07.2012, 15:28
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

Deff, спасибо за помощь. Но ваш вариант работает только в FF.
Изменение конструкции на document.all.contentMenuPersonal.style.height тоже не помогло.
Ответить с цитированием
  #4 (permalink)  
Старый 05.07.2012, 15:50
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от Squirr Посмотреть сообщение
Deff, спасибо за помощь. Но ваш вариант работает только в FF.
Изменение конструкции на document.all.contentMenuPersonal.style.height тоже не помогло.
document.getElementById("contentMenuPersonal")...

идентификаторы в кавычки нужно ставить (contentMenuPersonal, bannerBig1), но не block_4_close, block_4_open

12 строка в первом посте в первом коде не будет работать
if (document.getElementById(block_4_close).style.display='none') {dynamicSize = size;}

block_4_close вне функции...вместо него нужно "r0" или "r1", и в условии нужно ставить не одно равно, а 2
if (document.getElementById("r0").style.display == 'none') {dynamicSize = size;}

Последний раз редактировалось lord2kim, 05.07.2012 в 15:52.
Ответить с цитированием
  #5 (permalink)  
Старый 05.07.2012, 16:16
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от Squirr
size = document.getElementById(contentMenuPersonal).style .height
Вы не получите это значение, если оно не было явно задано в атрибуте style или программно установлено в скрипте.

<style>
#but {height: 50px}
</style>
<button id="but" onclick="alert(this.style.height)">click</button>
<button style="height: 60px" onclick="alert(this.style.height)">click</button>

Последний раз редактировалось bes, 05.07.2012 в 16:22.
Ответить с цитированием
  #6 (permalink)  
Старый 05.07.2012, 16:29
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

а почему для получение высоты просто не использовать clientWidth, clientHeight ?
Ответить с цитированием
  #7 (permalink)  
Старый 05.07.2012, 16:36
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от cyber
а почему для получение высоты просто не использовать clientWidth, clientHeight ?
clientHeight == height + padding
<style>
button {padding: 2px}
</style>

<button onclick="this.style.height = this.clientHeight">click</button>
Ответить с цитированием
  #8 (permalink)  
Старый 05.07.2012, 17:30
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

вот , выдрал из скрипта своего
width_drag = drag.obj.offsetWidth + parseInt(getComputed(drag.obj).marginLeft);
			  width_drag +=  parseInt(getComputed(drag.obj).marginRight);
			   
			   height_drag = drag.obj.offsetHeight  + parseInt(getComputed(drag.obj).marginTop);
			   
			     height_drag +=  parseInt(getComputed(drag.obj).marginBottom);

функция getComputed
function getComputed (obj){
	  
	  try{ 
	   return getComputedStyle(obj, null)
	   
	   } catch(e){ 
	      
		  return obj.currentStyle;
		   }
		
		};
Ответить с цитированием
  #9 (permalink)  
Старый 05.07.2012, 18:31
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Лично мне больше нравится такой вид
function getStyle(element) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(element, null)
  } else {
    return element.currentStyle;
  }
}


Если величины будут не в px, то IE<9 не справится, нужно будет усложнять функцию дополнительными действиями по переводу из других единиц измерения + учесть случай, когда выдаётся значение auto.

cyber, что нужно будет устанавливать, получив приведённые вами значения width_drag и height_drag?

Последний раз редактировалось bes, 05.07.2012 в 18:34.
Ответить с цитированием
  #10 (permalink)  
Старый 05.07.2012, 18:38
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<style>
button {padding: 2px}
</style>
 
<button onclick="
    this.style.height = ( this.getBoundingClientRect().bottom - this.getBoundingClientRect().top ) + 'px';
    alert( 'Высота элемента: ' + (this.getBoundingClientRect().bottom - this.getBoundingClientRect().top))
">click</button>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение вычисленного значения css свойства FanAizu jQuery 2 12.03.2014 20:30
Как узнать о поддержке браузером CSS свойства? estoesyo Элементы интерфейса 3 18.10.2010 22:12
Использование css свойства display для подменю Lex4e Общие вопросы Javascript 7 07.01.2010 22:02
Запретить свойства из CSS SunnyDay Общие вопросы Javascript 11 29.09.2008 14:30
Изменение имиджа по таймеру с помощью CSS и JavaScript Aimless Общие вопросы Javascript 10 15.08.2008 18:09