Question

我在屏幕上有一个可见的div，但当我得到它的高度时，它总是返回0.怎么可能？我已经尝试了许多jquery和javascript方法来获得高，但它返回0.这是我的div：

<div class="option-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="dropDownStyling" id="filterDropdowns">
            </div>

        </div>
    </div>

    <!-- Other contents -->
</div>

我尝试过以下方法来获得身高：

var $element = $("#filterDropdowns");
$element.css("height")
$element.height()
$element.innerHeight()
$element.outerHeight()

我也试过javascript：

 document.getElementById('filterDropdowns').offsetHeight
 document.getElementById('filterDropdowns').clientHeight

但在所有情况下，它返回0时返回宽度值。那么为什么高度值变为0？

Answer 1

创建一个功能＆amp;在DOM准备好之后调用

    function test () {
    var height = $('#filterDropdowns').innerHeight();
alert(height)
 }


$(document).ready(function(){
$('#filterDropdowns').append('23');
test();
})

<div class="option-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="dropDownStyling" id="filterDropdowns">

            </div>

        </div>
    </div>

//Other contents
</div>

https://jsfiddle.net/azL0070r/3/

Answer 2

如果您使用空白DIV而没有任何内容，则总是会得到0高度。

例如：

<div id="demo" class="text">
  <div id="abc">
  </div>
</div>

因此您必须在DIV中添加内容

获得DIV高度的第二种方法是使用clientHeight。

document.getElementById("xxx").clientHeight;

Answer 3

HTML

<div class="option-content">
<div class="row">
    <div class="col-sm-12">
        <div class="dropDownStyling" id="filterDropdowns">

        </div>

    </div>
</div>

的Javascript

var height = $('#filterDropdowns').height();
alert(height)<br>

CSS

#filterDropdowns {
   height: 150px;
}

为什么jquery高度和javascript高度返回0？

3 个答案: