RegEx

Question

getComputedStyle返回的值是解析值。这些通常与CSS 2.1的计算值相同，但是对于某些较旧的属性，例如width， height 或padding ，它们与使用的值相同。

-MDN: window.getComputedStyle() notes

因此，目前是否可以获取样式表中指定的height的解析值？

即知道样式表中某些元素的计算出的..px（= 已用）高度被指定为height: 100%;吗？（ 100% 是所讨论的 resolved 值。）

正在考虑有关此问题的一些新规范吗？

Answer 1

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

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

您可以尝试，如下所示。

RegEx

如果将高度指定为嵌入式样式，则可以像这样¹：

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

您可以阅读样式表规则本身。如果您知道设置元素宽度/高度的选择器，则可以执行以下操作：

.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％

2 个答案:

RegEx

边界计算

结论