获取元素的解析高度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

那么目前是否可以得到 height 的 解析值 ，因为它在样式 sheet 中指定？

即知道某些元素的计算 ..px (= used) 高度在样式 sheet 中指定为 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

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

...但是 none 将检索 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 争执以从可用信息中强制获得价值，并想出一种没有价值的方法。我曾多次尝试做这种事情，所以请注意：这种方式是疯狂的。

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

Answer 2

您可以阅读样式表规则本身。如果您知道设置元素 width/height 的选择器，您可以这样做：

.box {
  width: 12vw;
  background: red;  
}

<div class="box">red</div>

var sheet = document.styleSheets[0];
var rules = sheet.rules;

for (var i = 0; i < rules.length; i++) {
  if (rules[i].selectorText == '.box') {
    console.log(rules[i].style.width);
  }  
}

这将为您提供您正在寻找的 12vw。

根据元素的定义方式，理论上您可以创建一个辅助函数，通过遍历元素 classList 来为您获取这些值。

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

Get element's resolved height CSS property value; recognize 100%

javascript

css

getcomputedstyle

正则表达式

边界计算

结论