3

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

-- MDN：window.getComputedStyle() 注释

那么目前是否可以获得样式表中指定的解析值？height

即知道某些元素的计算..px（= used）高度是height: 100%;在样式表中指定的吗？（100%是有问题的解决值。）

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

编辑 2020-08-17：从 2012 年看到非常相似的问题和出色的答案：是否有一种跨浏览器方法来获取所有元素的所有属性的已使用 css 值？ （可悲的是，从那时起，注意似乎发生了变化。）

4

2 回答 2

2

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

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

你可以试试，就像我在下面做的那样。

正则表达式

如果您的高度被指定为内联样式，则可以像这样1将其从属性中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 从可用信息中强制获取价值，而是想出一种没有价值的方法。我已经多次尝试做这种事情，所以请注意：这种方式是疯狂的。

1 RegEx lookbehinds甚至远未完全支持，因此不应在生产中使用。

于 2019-08-16T16:44:22.527 回答
1

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

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

于 2019-08-16T17:38:58.787 回答