jQuery获取以像素为单位的高度

jQuery get height in pixels

本文关键字：高度 为单位 像素 获取 jQuery      更新时间：2023-09-26

我在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`

在CSS中，除非父元素也定义了高度，否则高度作为百分比是不起作用的。除非父母已经定义了身高，否则父母的身高是不起作用的（如果是百分比的话），以此类推

在这种情况下，请尝试将其添加到您的CSS:中

html, body {
  height: 100%;
}

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

根据您提供的代码，"0"是正确答案。--正如下面的评论中所提到的：默认情况下，潜水是被阻挡的。它解析为"0"的原因是，在此实例中，它从中派生"%"s的容器为0。所以你本质上是在说：高度=0*.25；

您需要指定div及其父节点的大小，或者需要有子节点来自然增长div的大小。

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

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

输出是19px作为字符串

或

你可以做这个Height_Int = new Number (parseInt($(#container).css('height'), 10))

输出为19作为整数

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

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

请参阅DEMO返回0的原因。

如果块的可见高度不是零，那么可能在加载页面之前调用jQuery.height()。将您的呼叫打包到$(document).ready(function() {});:

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

使用简单的JavaScript语法，它可以完美地工作，但它可以返回以百分比为单位的高度：

document.getElementById('container').style.height
相关文章：