JQuery получает высоту элемента автоматической высоты

Есть ли способ вернуть высоту элемента, который уже установлен в auto? Я просто получаю 0, когда я вызываю $( "# element" ). Height();

Вот код jquery. img.height() возвращает 0, поэтому конечный результат отключен.

img.css({top: (img.parent().height() - img.height()) /2, left: (img.parent().outerWidth() - img.outerWidth()) / 2});

HTML выглядит так:

<div id="exploreImage" class="virtual-room-large" style="width: 288px; height: auto; top: 185px; left: 89px; ">

Ответы

Ответ 1

Вы пробовали $("#element").outerHeight()? Он получает вычисленную высоту, а не явно заданную высоту.

Ответ 2

У меня была эта же проблема и нашел решение здесь: http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

Когда я использую jQuery, мне нравится придерживаться его, насколько я могу, для константы.

На самом деле оба решения - с помощью window.load() {} или $( "my element" ). load() {} работал красиво для меня, поэтому я надеюсь, что это может помочь вам или кому-либо еще найти эту проблему.

Ответ 3

пожалуйста, проверьте, что вы пытаетесь получить высоту, когда DOM готов, то есть в функции window.onload.

Если ваш элемент div пуст, а высота - автоматически, он вернет 0. Таким образом, ваш div, вероятно, будет пуст до того, как будет загружена полная страница.

Например: я хочу запомнить начальные высоты для моих .elementDiv divs:

var initialHeight = [];
window.onload = function() {
$('.elementDiv').each(function(i) {
  initialHeight[i]=$(this).height();
  });
  // then use it
  }

Если нет в функции onload, то высоты, которые я получаю, равны 0.

Надеюсь, это была причина, потому что я больше ничего не вижу.

Ответ 4

Я нашел обходное решение для перехода с легкостью и легкостью. Этому обходному пути нужен "прыжок" элемента:

var elementselector = "#elementtoscroll";
$(elementselector ).css("height", "auto");
var elemheight = $(elementselector).css("height");
$(elementselector).css("height", "0");
$(elementselector).css("height", elemheight);

Таким образом, javascript получает высоту - я знаю, что это не удачный способ, но он работает. Это важно, например, для облегчения эффекта.

EDIT: следует сказать, что это возможно с помощью CSS3 и CSS-стиля:

#panel{
    background-color: #FF00FF;
    display: block;
    height: 0px;
    transition: all 300ms ease-in-out;
    overflow: hidden;
}

Ответ 5

Вы можете попробовать Window.getComputedStyle();

Он вернет набор вычисленного стиля (если когда-либо свойство стиля не определено, например, авто)

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1);

Затем вы можете сказать

var computedHeight = style.height;

для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle