Получить высоту div без высоты, установленной в css
93
Есть ли способ получить высоту элемента, если для элемента нет набора правил высоты CSS. Я не могу использовать .height()метод jQuery, потому что ему сначала нужен набор правил CSS? Есть ли другой способ получить высоту?
Просто примечание на случай, если у других возникнет такая же проблема.
У меня была такая же проблема, и я нашел другой ответ. Я обнаружил, что получение высоты div, которая определяется его содержимым, должно быть инициировано в window.load или window.scroll, а не document.ready, иначе я получаю нечетные высоты / меньшие высоты, то есть до загрузки изображений. Я также использовал outerHeight () .
var currentHeight = 0;
$(window).load(function() {
//get the natural page height -set it in variable above.
currentHeight = $('#js_content_container').outerHeight();
console.log("set current height on load = " + currentHeight)
console.log("content height function (should be 374) = " + contentHeight());
});
Вероятно, вы получаете нечетную высоту, потому что есть больше инструкций, которые изменяют высоту после того, как вы их использовали / распечатали. Рекомендуется спрашивать высоту в конце вашего сценария
Gjaa
10
Можно сделать это в jQuery . Попробуйте все варианты .height(), .innerHeight()или .outerHeight().
height()необходимо правило css?height()получит вычисленную высоту элементов ...heightустанавливать css. Эта ссылка не имеет ничего общего с jquery.Ответы:
jQuery
.heightвернет вам высоту элемента. Ему не нужно определение CSS, поскольку он определяет вычисленную высоту.ДЕМО
Вы можете использовать
.height(),.innerHeight()или наouterHeight()основе того, что вам нужно..height()- возвращает высоту элемента без отступов, границ и полей..innerHeight()- возвращает высоту элемента, включая отступы, но исключает границу и поля..outerHeight()- возвращает высоту div, включая границу, но исключая поля..outerHeight(true)- возвращает высоту div, включая поля.Проверьте нижеприведенный фрагмент кода для живой демонстрации. :)
$(function() { var $heightTest = $('#heightTest'); $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"') .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>') .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>') .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>') .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>') });div { font-size: 0.9em; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; "> </div>источник
Просто примечание на случай, если у других возникнет такая же проблема.
У меня была такая же проблема, и я нашел другой ответ. Я обнаружил, что получение высоты div, которая определяется его содержимым, должно быть инициировано в window.load или window.scroll, а не document.ready, иначе я получаю нечетные высоты / меньшие высоты, то есть до загрузки изображений. Я также использовал outerHeight () .
var currentHeight = 0; $(window).load(function() { //get the natural page height -set it in variable above. currentHeight = $('#js_content_container').outerHeight(); console.log("set current height on load = " + currentHeight) console.log("content height function (should be 374) = " + contentHeight()); });источник
Можно сделать это в jQuery . Попробуйте все варианты
.height(),.innerHeight()или.outerHeight().$('document').ready(function() { $('#right_div').css({'height': $('#left_div').innerHeight()}); });Пример снимка экрана
Надеюсь это поможет. Благодарность!!
источник
Также убедитесь, что div в настоящее время добавлен к DOM и виден .
источник