Изменение свойства CSS

[cyber]

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

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

не совсем понял вопрос...
епт, а о переводе в старых ие я забыл

[cyber]

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

не забывайте уточнить что this.getBoundingClientRect будет работать не правильно при прокрутке=)

[devote]

будет работать не правильно при прокрутке=)

причем тут прокрутка? когда я показал пример того как выяснить высоту элемента.. Прокрутка этому не помеха.

[devote]

будет работать не правильно при прокрутке=)

не вижу изменений, как показывало 24 так и показывает.

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

[bes]

Да, наверное это самый точный и простой способ, хотя погрешность есть (в хроме видно), но даже это прокатывает.

<style>
  button {padding: 21px; border: solid 5px;}
</style>

<button style="height: 43px" onclick="
  var h = this.getBoundingClientRect().bottom - this.getBoundingClientRect().top;
  this.nextElementSibling.style.height = h;//не для IE
  alert(h +'; ' + this.style.height);
">
click</button> 
<button disabled>click</button>

[cyber]

хм...
getBoundingClientRect() возвращает результат без учета прокрутки, но в данном случае она и не важна.
короче я затупил , сорри =)

[Squirr]

Всем спасибо за ответы
Высоту окна getBoundingClientRect() считает отлично, даже если она не была задана. Значит, то, что мне нужно решить с помощью 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 = ( document.getElementById("contentMenuPersonal").getBoundingClientRect().bottom - document.getElementById("contentMenuPersonal").getBoundingClientRect().top ) + 'px';

var dynSize = document.getElementById("bannerBig1").style.height = ( document.getElementById("bannerBig1").getBoundingClientRect().bottom - document.getElementById("bannerBig1").getBoundingClientRect().top ) + 'px';

if (document.getElementById("r0").style.display == 'none') {dynSize = size;}

Остальной код из 1-го поста остался без изменений:

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

}

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

[bes]

В данном примере способ почему-то не отрабатывает

<style>
#content {
  margin: 80px 10px 30px;
  float: left;
  width: 100px;
  background: green;
}
#banner {
  width: 200px;
  margin: 80px 10px 30px;
  float: left;
  background: lightgreen;
}
</style>

<div id="content">
  <table cellspacing="10px" align="center">
    ...текст...
  </table>
</div>

<div id="banner" style="padding: 15px;">
  <div id="r0">
    ...текст...
    <a href="#">Читать далее &rarr;</a>
  </div>
  <div id="r1" style="display: none;">
    ...текст...<br>    ...текст...<br>    ...текст...
    <a href="#">&larr; скрыть текст</a>
  </div>
</div>

<script>
window.onload = function () {
  var banner = document.getElementById('banner');
  var content = document.getElementById('content');

  banner.onclick = function (e) {
    e = e || event;
    var target = e.target || e.srcElement;

    if (target.tagName == 'A') {
      if (target.parentNode == banner.children[0]) {
        banner.children[1].style.display = 'block';
        banner.style.height = '';
      } else {
        banner.children[1].style.display = 'none';
        banner.style.height = (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top) + 'px';
        alert('content: ' + (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top));
        alert('banner: ' + (banner.getBoundingClientRect().bottom - banner.getBoundingClientRect().top));
      }
    }
  }

}
</script>

[bes]

devote, как быть в этой ситуации, padding - явная проблема (хотя в примере с кнопкой прокатило), получается всё-таки getBoundingClientRect() - не лучшее решение.

Упрощённый пример

<div id="content" style="background: green;">
  text
</div>

<div id="banner" style="background: lightgreen; padding: 5px; overflow: hidden">
  <div>
   click
  </div>
  <div>
    click
  </div>
</div>

<script>
var banner = document.getElementById('banner');
var content = document.getElementById('content');

banner.onclick = function (e) {
  banner.style.height = (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top) + 'px';
  alert('content: ' + (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top));
  alert('banner: ' + (banner.getBoundingClientRect().bottom - banner.getBoundingClientRect().top));
}
</script>

[Squirr]

Реакция на код в браузере появилась после того, как я скрипт переместил в сам div, который он должен изменять. На отдельно вынесенный js почему-то реакции не было. Но с getBoundingClientRect() всё равно не вышло: в разных браузерах высота разная, и ни в одном не та, которая нужна. Пресловутый padding всё портит, как мастера тут сказали.