【问题标题】:How to compute the height of an element in jQuery?如何计算jQuery中元素的高度?
【发布时间】:2015-05-27 15:11:37
【问题描述】:

我正在使用别人写的手风琴。最初显示手风琴时,保留每行的初始高度,然后将它们的高度设置为 0。然后当行变得可见时,其高度恢复为原始值。

但在我的情况下,手风琴的高度会发生变化,因为我正在用数据异步填充它们。所以,当行变得可见时,我想根据它的新内容计算行的高度。然而,因为它的高度用.css('height', 0) 设置为0,所以$(elem).height() 给出了0。

有没有办法计算元素的高度,而不仅仅是检索它的 css 高度值?

【问题讨论】:

  • 你试过 innerHeight 吗?
  • 你试过 outerHeight 吗?
  • 你试过intermediateHeight吗?

标签: javascript jquery html css


【解决方案1】:

使用 jQuery 的 innerHeight 函数来获取元素的计算高度,无边框和边距。

var height = $('#myElement').innerHeight();

编辑: 使用 jQuery 的 outerHeight 函数获取元素的计算高度,包括 padding、border 和可选的 margin。

//without margin
var height = $('#myElement').outerHeight();

//with margin
var height = $('#myElement').outerHeight(true);

编辑 2: 您还可以将这些结果与原生 Javascript 进行比较。

var el = document.getElementById('myElement');
var height = el.offsetHeight;

【讨论】:

  • 所有 3 个都给出 0,可能与 .height() 的原因相同,css 高度已设置为 0。我希望有一种方法可以根据当前内容?
  • 如果您通过 AJAX 加载元素,请在尝试查找其大小之前确保该元素存在。尝试在 AJAX 函数的成功回调中计算高度,因为元素必须可见,函数才能工作。
【解决方案2】:

您也可以使用 Javascript 的 offsetHeight 函数。

var elementHeight = document.getElementById(id_attribute_value).offsetHeight;

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-16
    • 2016-12-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-24
    相关资源
    最近更新 更多