Question

我在页面上有一些元素有一个前伪元素，其高度用CSS calc（）函数设置样式;像这样的东西：

.el:before: {
    content: "";
    height: calc(50% + 10px);
}

我想使用this method来获取:before元素的高度 - 在基于Webkit的浏览器中，它可以工作并返回像素值。

var height = window.getComputedStyle(
    document.querySelector('.el'), ':before'
).getPropertyValue('height');

但是，在Firefox中，它会返回CSS规则的实际字符串（正好是'calc(50% + 10px)'）。

＆＃13;

(function() {
  var height = window.getComputedStyle(
    document.querySelector('.myelem'), ':before'
  ).getPropertyValue('height');
  
	document.getElementById('result').innerHTML = 'Calculated height is: ' + height;
})();

＆＃13;

.myelem {
  position: relative;
  padding-left: 20px;
}
.myelem:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1px;
  height: calc(50% + 2px);
  background-color: red;
}

＆＃13;

<div>
  <div class="myelem">
    <span>Some stuff here</span>
  </div>
</div>

<div id="result">

</div>

＆＃13;

有没有解决方法呢？

Answer 1

这确实是一个错误，

对于修复，您可以从2013年投票支持此bug-report并希望它最终得到修复，或者如果您有一些时间和C ++知识，甚至可以提出修补程序; - ）

要获得解决方法，您必须自己计算...

使用带有css calc的pseuso元素样式的window.getComputedStyle

1 个答案: