當style = auto或100％時獲取元素高度？

正如問題詢問我如何獲得元素的確切px高度或寬度，當該元素具有style =「width：100％; height：auto;」時例如。當style = auto或100％時獲取元素高度？

我可能不會將它嵌套在一個div中，並通過這樣獲得高度/寬度！

我猜javascript可以在這裏幫忙。

編輯：我使用這個：

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

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

下面的代碼爲我提供了字符串「自動」：

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>

來源

2013-03-07 Karl Morrison

你使用的是jquery或其他庫，還是應該用普通的javascript？ – 2013-03-07 17:05:41

無論哪一個:)我更喜歡jQuery，但JavaScript會工作，以及！ – 2013-03-07 17:06:49

你可以用純JavaScript這樣做

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 
});

見fiddle看到它的工作。

來源

2013-03-07 17:07:06 soyuka

更新我的問題，並張貼一些JavaScript！ – 2013-03-07 17:12:06

有了jQuery你可以使用[each]（http://api.jquery.com/each/）來解析容器中的每一個元素，我可以從你的代碼中獲得一些html來幫助你多一點？ – soyuka 2013-03-07 17:15:38

立即更新！ :) – 2013-03-07 17:24:48

您可以使用getComputedStyle()：

的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庫更容易：

var el = document.getElementById('dimensionsOfThis'), 
    compStyle = window.getComputedStyle(el,null), 
    height = compStyle.height, 
    width = compStyle.width;

來源

2013-03-07 17:06:56

這不給實際的高度，如果價值是自動/ 100％ – Praveen 2017-10-24 09:23:58

當style = auto或100％時獲取元素高度？

回答

相關問題