Question

我想在px中使用javascript计算元素的高度（例如div），当它没有 它的默认值（= {{1 }}或initial） 。

请注意，我的元素的高度现在（例如40px）有另一个值，但是如果我将其设置为auto，我想了解它的高度（以像素为单位）或initial。

换句话说：

auto

Answer 1

如果我理解正确，如果没有确定高度样式值，你希望能够得到元素的高度吗？

答案很简单：你做不到。浏览器必须已经呈现DOM才能访问链接到它的值，例如clientHeight。但是，您可以使用hacky方式，例如将高度设置为auto，将其读取，并将其设置回40px，或使用隐藏元素（可见性：隐藏，而不是显示：无，因为您需要它要被渲染），但要注意这有点脏，难以维护。

Answer 2

即使您没有为其中一个维度提供明确的值，也可以通过调用yourElement.getBoundingClientRect()来检索任何元素的维度

此方法返回具有许多属性（包括高度

）的对象

了解详情HERE

Answer 3

这是我发现的最佳解决方案，如果您的元素是容器。您可以在元素内立即插入内部div ，以便它（内部div）包装您的（外部）元素的全部内容。就这样：

<theElement style="height:40px;"> <!-- This is a CONTAINER! -->
    <div id="inner_div" style="margin:0; border:0; height:auto;">
        <!-- Your contents will be inserted here. -->
    <div>
</theElement>

现在你可以：

console.log(theElement.clientHeight) // This logs 40.

yourDesiredValue = document.getElementById('inner_div').clientHeight;
console.log(yourDesiredValue);       // This logs that you want.

console.log(theElement.clientHeight) // This logs 40.

请注意，内部div必须没有margin且没有border-width且其CSS height必须为auto或initial。

同时建议为overflow-y:hidden插入 CSS属性声明：theElement 。因此，内部div无法直观地从其父级边界传递。

如果元素没有默认值，则计算元素的默认高度

3 个答案: