Цитата:
епт, а о переводе в старых ие я забыл |
Цитата:
|
Цитата:
|
Цитата:
<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> |
Да, наверное это самый точный и простой способ, хотя погрешность есть (в хроме видно), но даже это прокатывает.
<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> |
хм...
getBoundingClientRect() возвращает результат без учета прокрутки, но в данном случае она и не важна. короче я затупил , сорри =) |
Всем спасибо за ответы :)
Высоту окна 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')">Читать далее →</a> </div> <div id="r1" style="display: none;"> ...текст... <a href="javascript:change_visibility ('r1', 'r0')">← скрыть текст</a> </div> </div> |
В данном примере способ почему-то не отрабатывает
<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="#">Читать далее →</a> </div> <div id="r1" style="display: none;"> ...текст...<br> ...текст...<br> ...текст... <a href="#">← скрыть текст</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> |
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> |
Реакция на код в браузере появилась после того, как я скрипт переместил в сам div, который он должен изменять. На отдельно вынесенный js почему-то реакции не было. Но с getBoundingClientRect() всё равно не вышло: в разных браузерах высота разная, и ни в одном не та, которая нужна. Пресловутый padding всё портит, как мастера тут сказали.
|
Часовой пояс GMT +3, время: 09:07. |