在JavaScript中转换EM为PX（并获得默认字体大小）-JavaScript中文网-JavaScript教程资源分享门户

什么是EM和PX？

在前端开发中，EM和PX都是用来设置元素尺寸的单位。其中，EM是相对单位，它的值是相对于父元素的字体大小而言的；而PX则是绝对单位，它的值是固定的像素值。

举个例子：如果我们想让一个<div>元素的宽度为父元素字体大小的两倍，我们可以使用2em作为宽度单位，也可以使用具体的像素值，例如16px。

为何需要转换EM为PX？

在实际开发过程中，我们经常会遇到需要将EM转换为PX的情况。一方面是因为有些库只支持PX单位，另一方面是因为以PX单位设置元素尺寸更为精确。

不过，要进行单位转换，我们还需要了解当前页面的默认字体大小。因为EM单位的计算基于其父元素的字体大小，如果没有明确设置，默认字体大小就成了一个关键参数。

如何获取默认字体大小？

获取默认字体大小有多种方式，这里介绍其中两种：

使用window.getComputedStyle()方法
```
const defaultFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
```
getComputedStyle()方法返回一个包含当前元素所有计算后样式属性的对象。我们可以使用该方法获取<html>元素（即根元素）的计算后样式对象，从而获得默认字体大小。

注意到getComputedStyle()返回的尺寸值是字符串类型，需要将其转换为数值型。这里使用parseFloat()函数将其转换为浮点数。
通过新建元素获得
```
const el = document.createElement('div');
el.style.fontSize = '1rem';
document.body.appendChild(el);
const defaultFontSize = el.offsetHeight;
document.body.removeChild(el);
```
这种方法利用了<div>元素的offsetHeight属性，它表示元素在垂直方向上占据的空间大小。设置元素的字体大小为1rem，并将其添加到<body>元素中，然后获取其高度值作为默认字体大小。最后还需要将新建的元素从文档中删除。

如何转换EM为PX？

知道了默认字体大小，我们就可以开始将EM单位转换为PX了。一般来说，一个EM单位等于其父元素的字体大小。因此，我们可以用以下公式进行转换：

function emToPx(em) {
  return em * defaultFontSize;
}

其中，em参数代表要转换的EM值，defaultFontSize变量代表页面的默认字体大小。

示例代码

下面是一个完整的示例，演示如何将EM单位转换为PX，并获取默认字体大小：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  --------- -- -- -----------------
-------
------
  ---- -----------
    ------ --------------------
    ------ ------------- ------- ----------
    ------- ------------------------ -- -----------
  ------
  ---- ------------------
  --------
    -- --------
    ----- -- - ------------------------------
    ----------------- - -------
    ------------------------------
    ----- --------------- - ----------------
    ------------------------------

    -- -------
    -------- ---------- -
      ------ -- - ----------------
    -

    -- -----------
    ----- ---------- - ---------------------------------------
    ----- ----- - ------------------------------
    ----- ------ - ----------------------------------
    ------------------------------------ -- -- -
      ----- ------- - -----

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------