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!

Answer 1

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

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

Answer 2

You can use calc

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