javascript - 获取元素的解析高度 CSS 属性值；认得100%

Question

The values returned by getComputedStyle are resolved values. These are usually the same as CSS 2.1’s computed values, but for some older properties like width, height, or padding, they are instead the same as used values.

-- MDN: window.getComputedStyle() notes

那么目前是否有可能获得样式表中指定的高度的解析值？

即知道某些元素的计算 ..px (= used) 高度在样式表中被指定为 height: 100%; 吗？ (100% 是相关的resolved 值。)

关于这个问题是否有一些新的规范正在考虑中？

---

编辑 2020-08-17:查看 2012 年非常相似的问题和出色的答案:Is there a cross-browser method of getting the used css values of all properties of all elements?(遗憾的是，从那时起，注意到似乎已经改变了。)

Answer 1

不，没有支持或启用此方法的规范或功能。有很多方法可以转向另一个方向，包括...

• getBoundingClientRect()
• offsetHeight
• getComputedStyle

...但不幸的是，没有一个能够检索 CSS 中指定的确切百分比。

您可以尝试，就像我在下面所做的那样。

---

正则表达式

如果您的高度被指定为内联样式，您可以像这样¹这样从属性中对其进行正则表达式:

let elem = document.getElementsByTagName("div")[0];
let re = /(?<=\height:\s+?)[^\;]+/i;
console.log(re.exec(elem.getAttribute("style"))[0]);

<div style="color: black; height: 100%; background: white;"></div>

不过，这是一种糟糕的做法，如果有多个宽度声明，则可能会出现问题(这种情况永远不会发生，但我们已经处于“糟糕的代码境界”，为什么不呢？)。当然，这忽略了一个事实，即通常首先应避免使用内联样式，因此这可能不适用于您。

---

边界计算

也可以通过比较元素的高度与其父元素的高度来自行计算该值。

let elem = document.getElementById("inner");
let pare = elem.parentElement;

let hrat = `${100*(elem.offsetHeight / pare.offsetHeight)}%`;

console.log(hrat);

#container {
  height: 300px;
  width: 400px;
  background: repeating-linear-gradient(45deg, rgba(255,0,0,0.35), rgba(255,0,0,0.35) 10px, rgba(255,0,0,0.1) 10px, rgba(255,0,0,0.1) 20px), linear-gradient(white, white);
}

#inner {
  height: 200px;
  width: 400px;
  background: darkgreen;
  mix-blend-mode: hue;
}

<div id="container">
  <div id="inner"></div>
</div>

但是，如果您添加边框、边距或填充，或者元素适应其内容的大小，则此计算将不正确。

---

结论

总而言之，一切都是卡顿。

在我看来，您最好不要与 CSS 和 JavaScript 争斗以从可用信息中获取值(value)，而是想出一种没有值(value)的方法。我已经多次尝试做这种事情，所以请预先警告:这种方式是疯狂的。

---

^{1RegEx 回顾是 not even remotely close得到完全支持，因此不应在生产中使用。}