即使没有定义 CSS 高度规则，如何在 jQuery 中检索 div 元素的高度？-css教程-PHP中文网

即使没有定义 CSS 高度规则，如何在 jQuery 中检索 div 元素的高度？

Patricia Arquette

发布： 2024-10-26 20:29:02

原创

1002 人浏览过

How can I retrieve the height of a div element in jQuery even if it doesn't have a CSS height rule defined?

如何在没有 CSS 高度规则的情况下检索 Div 的高度

当您需要确定元素的高度时可能会令人沮丧，但是没有定义 CSS 高度规则。不过，不用担心！ jQuery 提供了一个解决方案。

利用 jQuery 的 Height() 方法

与您可能假设的相反，jQuery 的 .height() 方法不需要预定义的 CSS 高度规则。它计算元素的渲染高度，同时考虑其计算的样式。这使得即使在没有显式设置高度的情况下它也是一种有效的方法。

了解高度计算选项

jQuery 提供了几种高度计算方法来满足您的特定需求：

.height()：返回元素的高度，不包括内边距、边框和边距。
.innerHeight()：返回包括内边距但不包括边框和边距的高度。
.outerHeight()：返回高度，包括边框，但不包括边距。
.outerHeight(true)：返回高度，包括边距和所有装饰。

现场演示

以下代码片段演示了不同的高度计算方法：

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest
    .html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

登录后复制

此代码创建一个高度为 180px、内边距为 10px 的 div ，边距 10px，蓝色边框。然后它显示使用每种方法计算出的高度。您可以在浏览器控制台中检查渲染结果。

以上是即使没有定义 CSS 高度规则，如何在 jQuery 中检索 div 元素的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！