javascript - 获取 div 高度

Question

Firebug 告诉我计算的样式my_div：

宽度 300 像素

高度 453.167px

然而，当我执行时console.log(mydiv.style.height)，它给了我一个空字符串，即使console.log(mydiv)记录了正确的元素。我确定在调用此日志记录代码时页面已加载。我很欣赏不使用 jQuery 的解决方案。

Answer 1

根据选择的浏览器，其中之一将执行以下操作：

mydiv.offsetHeight
mydiv.clientHeight

获取剪辑的 DIV 的全高

获取div的高度

Answer 2

更新：

自从我最初的回答以来，许多浏览器不一致的问题已经得到修复。现在clientHeightDOM 元素的属性是可靠的。

var height = element.clientHeight;

对于没有 CSS 或内联布局框的元素，Element.clientHeight 只读属性为零，否则它是元素的内部高度（以像素为单位），包括填充，但不包括水平滚动条高度、边框或边距。

clientHeight 可以计算为 CSS 高度 + CSS 填充 - 水平滚动条的高度（如果存在）。

注意：此属性会将值四舍五入为整数。如果需要小数值，请使用 element.getBoundingClientRect()。

来源：https ://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

原答案：

如果你使用 jQuery JS 库，你可以这样做：

var computed_height = $('#my_div').height();

如果你使用 Prototype JS 库，它是类似的：

var computed_height = $('my_div').getHeight();

使用库通常是做某事最简单和最跨浏览器的方式。使用 vanilla js 获取计算样式是不可靠的，因为不同浏览器的属性不同。