当style = auto或100％时获取元素高度？ [英] Get element height when style = auto or 100%?

问题描述

正如问题所问，当元素的样式为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）; //这会提醒字符串 auto，而不是像素高度
< / script> 
  

解决方案

您可以使用像这样的纯JavaScript来做到： / p>

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' ）。高度（）; 
  

编辑

现在容器中有很多元素：

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（）; 
 //做任何您想做的事现在图片的高度为
}）； 
  

请参见小提琴以查看其工作原理。

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.

I may NOT nest it inside a div and get the height/width via so!

I'm guessing javascript can help out here.

EDIT: I am using this:

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

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

The following code provides me with the string "auto":

collectNodes[0].style.height;

EDIT2: This is my code.

<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>

解决方案

You could do it with pure javascript like this :

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

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

Edit

Now with many elements within a container :

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

JQuery

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

See fiddle to see it working.

这篇关于当style = auto或100％时获取元素高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！