如何在JavaScript中从navbar_height变量减去CSS的2rem值？

要完成这个需求，核心是把rem单位转换成像素值后再和navbar_height（像素单位）做运算，因为不同单位不能直接相减。具体步骤和代码如下：

实现思路 #

1. 获取根元素（<html>）的实际字体大小：1rem等于根元素的font-size值，浏览器默认是16px，但可能被自定义样式修改，必须动态获取。
2. 将2rem转换为对应的像素值：用2乘以根元素的字体大小。
3. 计算最终的padding值：用navbar_height减去转换后的像素值，同时避免出现负数（防止布局异常）。

修改后的代码 #

// 获取navbar的高度（像素单位）
const navbar_height = document.querySelector(".navbar").offsetHeight;
// 获取根元素实际生效的字体大小，转为数字
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
// 计算2rem对应的像素值
const remPixelValue = 2 * rootFontSize;
// 计算最终paddingTop，确保结果不小于0
const finalPadding = Math.max(navbar_height - remPixelValue, 0);
// 设置body的paddingTop
document.body.style.paddingTop = finalPadding + "px";

关键细节说明 #

• getComputedStyle(document.documentElement).fontSize：获取根元素实际渲染的字体大小，而非CSS中写的初始值，保证计算准确。
• parseFloat：把带px后缀的字符串（比如"16px"）转换成纯数字，方便后续运算。
• Math.max(..., 0)：防止navbar_height小于2rem时出现负数padding，避免页面元素向上偏移出视口。

内容的提问来源于stack exchange，提问作者Andreas