javascript 当 style = auto 或 100% 时获取元素高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15276240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get element height when style = auto or 100%?
提问by Karl Morrison
Just as the questions asks how may I get the exact px height or width of an element when that element has style="width:100%; height:auto;" for example.
正如问题所问的那样，当该元素具有 style="width:100%; height:auto;" 时，我如何获得该元素的确切 px 高度或宽度 例如。
I may NOT nest it inside a div and get the height/width via so!
我可能不会将它嵌套在 div 中并通过 so 获取高度/宽度！
I'm guessing javascript can help out here.
我猜 javascript 可以在这里提供帮助。
EDIT: I am using this:
编辑：我正在使用这个：
var collectNodes = document.getElementById('fade').children;
collectNodes[y].height() // ??
The following code provides me with the string "auto":
以下代码为我提供了字符串“auto”：
collectNodes[0].style.height;
EDIT2: This is my code.
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>
回答by soyuka
You could do it with pure javascript like this :
你可以像这样使用纯 javascript 来做到这一点：
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;
}
With jQuery library it's easier :
使用 jQuery 库更容易：
JQuery
查询
var height = $('#element').height();
Edit
编辑
Now with many elements within a container :
现在一个容器中有许多元素：
Html
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>
I changed your opacity to visibility for compatibility purposes. Don't use display:none; or the height parsing will fail ;).
出于兼容性目的，我将您的不透明度更改为可见性。不要使用 display:none; 否则高度解析将失败;)。
JQuery
查询
$("#divId img").each(function(index, picture) {
var height = $(picture).height();
//Do everything you want with the height from the image now
});
See fiddleto see it working.
