Javascript-форум - Изменение свойства CSS

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Изменение свойства CSS (https://javascript.ru/forum/events/29626-izmenenie-svojjstva-css.html)

Изменение свойства 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>

Но ни в одном из браузеров вообще ничего не произошло.

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;}

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

Цитата:

Сообщение от Squirr (Сообщение 186506)

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;}

Цитата:

Сообщение от 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>

а почему для получение высоты просто не использовать clientWidth, clientHeight ?

Цитата:

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

а почему для получение высоты просто не использовать clientWidth, clientHeight ?

clientHeight == height + padding

<style>
button {padding: 2px}
</style>

<button onclick="this.style.height = this.clientHeight">click</button>

вот , выдрал из скрипта своего

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;
		   }
		
		};

Лично мне больше нравится такой вид

function getStyle(element) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(element, null)
  } else {
    return element.currentStyle;
  }
}

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

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

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