How to: Subtract a CSS value from a JS variable height?

Question

How can I subtract from the navbar_height for example 2rem in the following function?

navbar_height = document.querySelector(".navbar").offsetHeight;
document.body.style.paddingTop = navbar_height + "px";

Thanks!

Explain why this is needed. Maybe there is a simpler solution. — Andrei Fedorov, Oct 28 '22 at 12:41
@AndreiFedorov My navbar is position-fixed, so the navbar_height adds a padding-top to the body so as not to obscure any content. Now the style of my navbar is as follows: padding: 2rem 0; -> 2rem under the navbar break up the symmetrical layout hope you could follow me :) — Andreas, Oct 28 '22 at 12:45
Are you looking to convert the [`rem` into px?](https://stackoverflow.com/questions/36532307/rem-px-in-javascript) — LeoDog896, Oct 28 '22 at 12:46
@LeoDog896 No. Only to substract from the navbar_height 2rem, because 2rem are the padding of the fixed navbar and without subtract this my symmetrical layout would be damaged — Andreas, Oct 28 '22 at 12:49

score 1 · Accepted Answer · answered Oct 28 '22 at 12:44

1

You can use calc

navbar_height = document.querySelector(".navbar").offsetHeight;
document.body.style.paddingTop = `calc(${navbar_height}px - 2rem)`;

answered Oct 28 '22 at 12:44

Cerbrus

score 0 · Answer 2 · answered Oct 28 '22 at 12:45

0

You can use parseFloat(getComputedStyle(document.documentElement).fontSize) to get the rem value:

let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
console.log(rem);

answered Oct 28 '22 at 12:45

tacoshy

2 Answers2