И снова вынужден я обратиться к мудрости гуру. Проблема схожая, поэтому новую ветку заводить не стал.
На странице следующая конструкция из блоков:
Блоки div#r0 и div#r1 сменяют друг друга при нажатии на ссылку и имеют разное количество контента (высота их не задана).
Мне нужно добиться того, чтобы при нажатии на ссылку изменялась параметры "height" у div#content и "top" у div#bottom.
Я написал следующий скрипт:
<div id="content">
<table width="100%">
<tr><td>
<div id="contentMenuPersonal">
<table>
<tr><td class="contentMenu"><a href="/">Main</a></td></tr>
...
</table>
</div>
<div id="bannerBig1">
<div id="r0">
<p>Текст</p>
<a href="javascript:change_visibility ('r0', 'r1')">Читать далее →</a>
</div>
<div id="r1" style="display: none;">
<p>Текст</p>
<a href="javascript:change_visibility ('r1', 'r0')">← скрыть текст</a>
</div>
</div>
</td></tr>
</table>
<script type="text/javascript">
if (document.getElementById("r1").style.display = 'none') document.getElementById("content").style.height = "1100px";
else document.getElementById("content").style.height = "1484px";
</script>
</div>
<div id="bottom">
<script type="text/javascript">
document.getElementById("content").style.height = ( document.getElementById("content").getBoundingClientRect().bottom - document.getElementById("content").getBoundingClientRect().top ) + 'px';
var h = parseInt((document.getElementById("content").getBoundingClientRect().bottom - document.getElementById("content").getBoundingClientRect().top));
//if (h == 1484.8333740234375)
if (h > 1450)
{
document.getElementById("bottom").style.top = "1620px";
}
else
{
document.getElementById("bottom").style.top = "1275px";
}
</script>
</div>
Я долго пытался его отладить, но пока не смог добиться нужного результата. Скрипт вынесен в сами блоки, потому что иначе он почему-то вообще не работал, как будто браузер его не видел. Функция смены видимости блоков "r0" и "r1" работает нормально, так же как и функция, которая меняет параметр "top" у div#bottom (проверено изменением условия). А вот параметр "height" у div#content никак изменить динамически не получается.