Question

我在HTML页面中有以下元素：

<body>
    <div style="height:100%; width:100%">
    <div style="height:100px;"></div>
    <div id="container" style="height:25%; width:50%">
    </div>

现在我想使用jQuery（或纯JavaScript）获得div container的高度（以像素为单位）。我该怎么办？

$('#container').height() // returns `0`

Answer 1

在CSS中，除非父元素也定义了高度，否则高度百分比不起作用。并且父母的身高不会起作用（如果它是一个百分比），除非其父母的身高已定义，等等。

在这种情况下，请尝试将此添加到您的CSS：

html, body {
  height: 100%;
}

更新：您的代码返回0的另一个原因是因为DIV没有任何子节点（甚至没有文本节点）。如果添加了一个子节点，它将返回该子节点的高度，但它仍然不会返回25％的值，直到您为以百分比定义高度的所有元素父项添加显式高度。

Answer 2

使用您提供的代码，“0”是正确的答案。 - 如下面的评论中所述：Divs默认是阻止的。这个解析为“0”的原因是因为在这个例子中，它从中导出“％”的容器是0.所以你实际上是在说：height = 0 * .25;

您需要指定div的大小及其父级OR，需要有子节点，这些子节点会自然地增大div的大小。

然后$('#container').height()将返回大于0的值

Answer 3

您可以执行此操作Height_String= new String($('#container').css('height'))

输出为19px为字符串

或

您可以执行此操作Height_Int = new Number (parseInt($(#container).css('height'), 10))

输出为19为整数

Answer 4

$('#container').css('height');

Answer 5

如果您的块的可见高度不是零，那么可能在加载页面之前调用jQuery.height()。将您的来电换入$(document).ready(function() {});：

$(document).ready(function() {
    /* some actions */
    var h = $('#container').height(); // Height that you need.
});

Answer 6

高度返回0，因为计算出的#container高度为0。将% height分配给没有任何相对固定高度的div将被分配给0。

请参阅DEMO为何返回0。

Answer 7

使用简单的JavaScript语法，它可以很好地工作，但它以百分比形式返回高度：

document.getElementById('container').style.height

jQuery以像素为单位获取高度

7 个答案: