rem px in Javascript

Question

我在JS中使用了这段代码：

bigPhoto.setAttribute("width", "200rem");

结果以像素为单位显示在html源代码中，

但是：

当我将其更改为20rem时，照片变得非常小。 我无法解决照片中提到的问题。

- Malus Jan

---

你是指 rem 还是 em？ - user2705585

检查器始终会显示像素宽度 - 这并不意味着您未指定 rem。显然，您的基础字体大小为 10px，因此 20rem = 200px。 - Adam Jenkins

rem：相对于em。rem的大小取决于设备，如果网站在不同密度的设备上使用，建议使用rem。在我要编写的项目中，我应该使用DOM，所以我使用JS来设置宽度，但是JS中的rem无法正常工作。我们无法确定20rem在所有设备上都等于200px。 - Malus Jan

Answer 1

另一种方法是将rem转换为像素：

function convertRemToPixels(rem) {    
    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
}

当您需要在JavaScript中执行一些算术操作时（例如使用鼠标位置来显示工具提示），这将非常有用...

- etham

---

这是一个很好的回答。getComputedStyle 函数也被 IE11 支持。 - keul

我使用了隐藏元素来计算1个rem，但这个答案很好。 - Dee

非常有用！小细节：将输入的'rem'使用'parseFloat(rem)'进行转换也可以允许包含'rem'单位值的情况。 - Julien

谢谢。我可以在网页上获取rem信息。只需在开发者工具的控制台中输入“getComputedStyle(document.documentElement).fontSize”。然后你就可以得到以像素为单位的rem值了。 - Alf Bae

@Julien，它只会解析字符串“123rem”的数字部分，即123，而不会计算每个rem单位相当于多少像素。 - David Min

有没有与Node.js等效的东西？ - Ali EXE

Answer 2

HTML的width属性只接受整数像素值或百分比（后面跟着%符号）。

如果您希望使用CSS长度单位，则必须使用CSS（并设置bigPhoto.style.width = "200rem"）。

- Quentin