Evaluate CSS calc function in JS

Question

I am trying to figure out a way to execute the CSS calc function directly in my js file in order to compare two elements height.

So let's say I have two elements that I get using jQuery, and all I want to do is something around those simple lines :

if (element1.height > element2.height) then ...

Element2 is nested within Element1, who has an overflow:scroll.

Problem is, my element1 has all attributes clientHeight, scrollHeight,etc equals to 0 and when I go in the element1.style.height the result is : calc(100% - 64px). Please do note that the result of this is never equal to 0px since my element1 height when I inspect it is around 500px (of course depends of the screen size). And my element2 height is obtained in px using element2.scrollHeight (more reliable in my case).

So in the end I'm trying to compare two expressions that would like this : calc(100% - 64px) > 452 .. And of course this doesn't work.

Is there any way I could execute the calc() function within my js file to get the equivalent height in px in order to compare my two elements ? Or can I have access to the data anywhere else ?

My end goal is to know whether the element2's height is bigger than element1's. So any other implementation that height calculation is welcome as well.

Although a description can be useful, it would be so much clearer if you provided actual code (but not more than necessary) with which the problem can be reproduced. — trincot
– trincot, Commented Feb 21, 2018 at 10:28
@GuillaumeRoche-Bayard Not trying to be rude but to improve readability for others, if you could format your question better, we can help you. This is from "why this is worth a downvote" section: Without the code, the question is not answerable. Any solution would be based on guesses. Even if someone guessed right, not having any code means it’s harder to relate for future readers. Questions that aren’t useful for people other than the asker are discouraged on Stack Overflow. — Mithgroth
– Mithgroth, Commented Feb 21, 2018 at 10:36

Gorka Hernandez · Accepted Answer · 2018-02-21 10:36:33Z

2

You can get the computed style using Window.getComputedStyle(). Check out the compatibility table.

Then, grab the width and remove the "px" from the result, and parse it to an integer:

let myElement = document.getElementById('child');
let width = parseInt(window.getComputedStyle(myElement).width.slice(0, -2), 10);
console.log(width);

#parent {
  background: red;
  height: 100px;
  width: 80%;
}

#child {
  background: green;
  height: 60px;
  width: calc(100% - 64px);
}

<div id="parent">
  <div id="child"></div>
</div>

edited Feb 21, 2018 at 10:36

answered Feb 21, 2018 at 10:32

Gorka Hernandez

3,96825 silver badges29 bronze badges

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

3 Comments

Guillaume Roche-Bayard Over a year ago

The problem is that getComputedStyle actually returns the data with 'calc(100% - 64px)' and not the actual value.

Guillaume Roche-Bayard Over a year ago

Ok it seems to work on your case i'll try to figure out what is not working on mine, thanks for the info I didn't know that method :).

Gorka Hernandez Over a year ago

@GuillaumeRoche-Bayard Check out the new sample, and make sure you are reading the height/width property from the result of getComputedStyle(). Make sure you place your JS code before the closing </body> tag to make sure the page is completely rendered, unless you are doing it in an event based way.

Joachim · Accepted Answer · 2025-07-03 12:55:19Z

An even more foolproof & scalable solution to @Gorka Hernandez's excellent answer is to just use the element's getBoundingClientRect() method.

Simple example

Just run getBoundingClientRect() on your desired element and it will give you its dimensions in pixels.

const myElement = document.getElementById('my-element')
const rect = myElement.getBoundingClientRect()

result.textContent = 'The DIV is ' + Math.round(rect.width) + ' pixels wide!'

#my-element {
background-color: #0c8;
width: calc(50px + 50%); /* This is just an example, feel free to change it */
height: 100px;

border-radius: 10px;
}

<div id = my-element><div>
<div id = result></div>

Advanced example

If you don't have access to a specific HTML element, and just want to convert a calc() into pixels, just create a dummy element in JavaScript & use the same method as before.

// Create dummy element
const dummy = document.createElement('div')

// Set dummy size
dummy.style.width = 'var(--element-width)'
document.body.appendChild(dummy)

elementWidth = dummy.getBoundingClientRect().width

// Remove the element when we're finished with it
dummy.remove()

// Display total width
result.textContent = 'The DIV is ' + Math.round(elementWidth) + ' pixels wide!'

:root {
--element-width: calc(50px + 50%) /* Example calc(). You can edit this */
}

#my-element {
background-color: #08f;
width: var(--element-width);
height: 100px;

border-radius: 10px;
}

<div id = my-element></div>
<div id = result></div>

Hope that works for you!

Collectives™ on Stack Overflow

Evaluate CSS calc function in JS

2 Answers 2

3 Comments

Simple example

Advanced example

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Simple example

Advanced example

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related