当元素没有默认值时计算元素的默认高度答案

【问题标题】：Calculate element's default height when it hasn't default value当元素没有默认值时计算元素的默认高度
【发布时间】：2019-04-05 06:41:41
【问题描述】：

我想以 px 为单位计算元素的高度（例如 div），当它没有时使用 javascript它是默认值（= initial 或 auto）。

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

换句话说：

myElement.style.height = '40px'; // for example
// ...
console.log(myElement.clientHeight); // This logs "40". This is not the value I want.
myElement.style.height = 'initial';
console.log(myElement.clientHeight); // This logs the value I want. But I don't want to execute above statement AT ALL!

【问题讨论】：

你会用jQuery吗？
欢迎来到 Stack Overflow！请查看我们的SO Question Checklist 以帮助您提出一个好问题，从而得到一个好的答案。
尝试：´var cln = myElement.cloneNode(true); cln.style.visibility = '隐藏'; getElementsByTagName("BODY")[0].appendChild(cln); cln.style.height = '初始'; console.log(cln.clientHeight);'
difference between css height : 100% vs height : auto的可能重复
基本上你克隆元素，隐藏它，附加到正文，将高度更改为初始值，然后获取高度，我可以做得更好，但我正在移动，对不起。

标签： javascript html css

【解决方案1】：

如果我理解正确，如果没有定义精确的高度样式值，您希望能够获得元素 将具有的高度？

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

【讨论】：

是的，您理解正确。感谢您的指导。如果它没有常规方式，我正在寻找一种干净的hacky方式。

【解决方案2】：

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

此方法返回一个具有许多属性的对象，包括高度

了解更多HERE

【讨论】：

这将返回相同的clientHeight 值！我尝试过这个。 theElement.clientHeight == Math.round(theElement.getBoundingClientRect().height)
当你覆盖一个属性的值时，如果你不缓存原始值，就没有办法检索它。如果您考虑一下，这是非常有意义的，当一个对象发生变异时，它必须丢弃旧值，以便将新值放入其中。我建议您做的是在设置新高度之前存储元素的初始高度，这样，您不必致电myElement.style.height = 'initial';
是的，这就是我说“我想计算 ...”的原因。店铺？不，这是不可能的！它的值可能会发生变化。它是一个动态元素。
不，当它的高度是固定的initial时存储原始高度
元素的内容可能会在你存储它的高度后改变。所以“储值”不再有效。

【解决方案3】：

这是迄今为止我找到的最佳解决方案，如果您的元素是容器。您可以在您的元素内立即插入一个inner div，以便它（inner 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。

另外建议插入 CSS 属性声明：overflow-y:hidden 为theElement。所以内部div 不能从其父级边界通过，视觉上。

【讨论】：