Using window.getComputedStyle for pseuso elements style with css calc

Question

I've got some elements on the page that have a before pseudo element whose height is styled with the CSS calc() function; something like this:

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

I want to use this method to get the height of the :before element - and in Webkit-based browsers it works and returns a pixel value.

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

In Firefox, however, it returns the actual string of the CSS rule (exactly 'calc(50% + 10px)').

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

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

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

<div id="result">

</div>

Is there any work-around for this?

Kaiido · Accepted Answer · 2016-08-17 09:32:29Z

3

That's indeed a bug,

For a fix, you can vote for this bug-report from 2013 and hope that it will finally get fixed, or even propose a patch if you've got some time and C++ knowledge ;-)

For a workaround, you'll have to compute it yourself...

answered Aug 17, 2016 at 9:32

Kaiido

139k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kaiido Over a year ago

PS : for the workaround, e.generalov does provide something in the comments of the bug report that seems to work : jsfiddle.net/3FecG/3

Tibi Neagu Over a year ago

Also, looks like it got fixed

Collectives™ on Stack Overflow

Using window.getComputedStyle for pseuso elements style with css calc

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related