Как получить высоту div, которая включает обрезанную область div?
<div style="height: 20px; overflow: hidden">
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
</div>
Как получить высоту div, которая включает обрезанную область div?
<div style="height: 20px; overflow: hidden">
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
</div>
Ну, вы не можете сделать это таким образом, но это возможно при добавлении внутреннего элемента в ваш контейнер, например:
<div id="element" style="height: 20px; overflow: hidden;">
<p id="innerElement"> <!-- notice this inner element -->
content<br />content<br />content<br />
content<br />content<br />content<br />
content<br />content<br />content<br />
</p>
</div>
sidenote: обертывание содержимого внутри абзацев также является хорошей практикой, плюс один дополнительный элемент не дает столько проблем, если они вообще существуют...
И JavaScript:
var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);
P.S. Чтобы этот JavaScript работал, поместите его после своего #element
div, потому что обычный JavaScript выполняется до того, как DOM готов, если он не дал этого сделать. Чтобы сделать эту работу, когда DOM готов, проверьте это.
Но я бы предложил получить jQuery, это будет полезно позже, если вы собираетесь расширять операции JavaScript в своем сайт.
Кроме того, jQuery - это власть, для реального!
Таким образом, просто добавьте этот script к вашему <head />
(если вы включили jQuery):
$(document).ready(function() {
var innerHeight = $('#innerElement').height();
alert(innerHeight);
});
Это работает во всех случаях, есть ли у вас текст node внутри или в контейнере. Это использование jquery, но вам не нужно.
//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();
$('# elem') [0] возвращает элемент dom из вызова jquery. поэтому вы можете использовать это на любом элементе dom, используя простой ol javascript.
Вот один из способов добиться того, что вам нужно, используя идею Фабиана:
function GetHeight() {
var oDiv = document.getElementById("MyDiv");
var sOriginalOverflow = oDiv.style.overflow;
var sOriginalHeight = oDiv.style.height;
oDiv.style.overflow = "";
oDiv.style.height = "";
var height = oDiv.offsetHeight;
oDiv.style.height = sOriginalHeight;
oDiv.style.overflow = sOriginalOverflow;
alert("Real height is " + height);
}
Живая демонстрация и тестовый пример: http://jsfiddle.net/yahavbr/7Lbz9/
То не возможно афайк. Вы можете попробовать удалить этот стиль и установить его с помощью javascript после того, как вы получите высоту. Не самое изящное решение, но я считаю его единственным.