首页 > web前端 > css教程 > 正文

如何在没有显式 CSS 高度规则的情况下确定 jQuery 中的元素高度?

Barbara Streisand
发布: 2024-11-01 14:49:29
原创
706 人浏览过

How to Determine Element Height in jQuery Without Explicit CSS Height Rules?

在没有 CSS 高度规则的情况下确定元素的高度

在元素没有 CSS 高度规则的情况下,获取元素的高度可能会很困难它的高度。 jQuery .height() 方法需要预定义的 CSS 高度值,在这种情况下似乎不够。但是,还有其他方法可以确定元素的高度。

jQuery .height()

与普遍看法相反,jQuery .height() 不依赖关于 CSS 高度定义。它计算元素的计算高度,使其适合没有明确指定 CSS 高度的场景。

DEMO

.height():检索元素的高度没有 padding、border 或 margin。

.innerHeight():检索元素的高度,包括 padding,但不包括 border 和 margin。

.outerHeight():检索元素的高度,包括 border 但不包括margin.

.outerHeight(true):检索元素的高度,包括边框和边距。

现场演示的代码片段

<code class="js">$(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>')
});</code>
登录后复制

以上是如何在没有显式 CSS 高度规则的情况下确定 jQuery 中的元素高度?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板