7

質問で、要素に style="width:100%; height:auto;" がある場合に要素の正確な px の高さまたは幅を取得する方法を尋ねるのと同じように 例えば。

div 内にネストして高さ/幅を取得することはできません。

ここでJavaScriptが役立つと思います。

編集:私はこれを使用しています:

var collectNodes = document.getElementById('fade').children;

collectNodes[y].height() // ??

次のコードは、文字列「auto」を提供します。

collectNodes[0].style.height;

EDIT2:これは私のコードです。

<div id="divId">
    <img class="node" src="somePic0.png" style="z-index:10; opacity:0;"/>
    <img class="node" src="somePic1.png" style="z-index:9; opacity:0;"/>
    <img class="node" src="somePic2.png" style="z-index:8; opacity:1;"/> 
    <img class="node" src="somePic3.png" style="z-index:7; opacity:1;"/>
    <img class="node" src="somePic4.png" style="z-index:6; opacity:1;"/>
</div>

<script>
    var collectNodes = document.getElementById('divId').children; 
    var y = 0;
    for ( var x = 0; x < collectNodes.length; x++ ) {
        if ( collectNodes[x].style.opacity !== "" && !y ) {
            y = x;
        }
    }

    alert(collectNodes[y].height); // This alerts the string "auto" and not pixel height
</script>
4

1 に答える 1

11

次のような純粋なjavascriptでそれを行うことができます:

Javascript

var divHeight;
var obj = document.getElementById('id_element');

if(obj.offsetHeight) {
    divHeight=obj.offsetHeight;

} else if(obj.style.pixelHeight) {
    divHeight=obj.style.pixelHeight;

}

jQuery ライブラリを使用すると、より簡単になります。

JQuery

var height = $('#element').height();

編集

コンテナ内に多くの要素が含まれるようになりました:

HTML

<div id="divId">
    <img class="node" src="path/to/pic" style="z-index:10; opacity:0;"/>
    <img class="node" src="path/to/pic" style="z-index:9; opacity:0;"/>
    <img class="node" src="path/to/pic" style="z-index:8; opacity:1;"/> 
    <img class="node" src="path/to/pic" style="z-index:7; opacity:1;"/>
    <img class="node" src="path/to/pic" style="z-index:6; opacity:1;"/>
</div>

互換性のために、不透明度を可視性に変更しました。display:none; を使用しないでください。そうしないと、高さの解析が失敗します;)。

JQuery

$("#divId img").each(function(index, picture) {
   var height = $(picture).height();
   //Do everything you want with the height from the image now
});

それが機能することを確認するには、フィドルを参照してください。

于 2013-03-07T17:07:06.290 に答える