web-dev-qa-db-ja.com

Jqueryは自動高さ要素の高さを取得します

すでに自動に設定されている要素の高さを返す方法はありますか？ $（ "＃element"）。height（）;を呼び出すと0になります。

これが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; ">
jqueryheight
13
brenjt

私はこれと同じ問題を抱えていて、ここで解決策を見つけました： http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

JQueryを使用しているときは、一貫性を保つために、できる限りそれに固執するのが好きです。

実際には、両方のソリューション-window.load（）{}または$（ "my element"）。load（）{}を使用すると、うまく機能したので、これがあなたや他の誰かがこの問題を見つけるのに役立つことを願っています。

3
acarito

イーズインとイーズアウトを使用して移行を行うための回避策を見つけました。この回避策には、要素の「ジャンプ」が必要です。

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

このようにして、javascriptは高さを取得します-それが美しい方法ではないことはわかっていますが、機能します。これは、たとえばイーズアウト効果にとって重要です。

編集：これはCSS3と次のようなCSSスタイルで可能であると言わなければなりません：

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

Window.getComputedStyle（）;を試すことができます。

計算されたスタイルのセットを返します（スタイルプロパティが定義されていない場合（autoなど））

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

0
I am L