CSS 在JavaScript中转换em为px（并获得默认字体大小）

在本文中，我们将介绍如何使用JavaScript将em单位转换为px单位，并获取默认的字体大小。

阅读更多：CSS 教程

什么是em和px单位？

在CSS中，em和px是用来度量元素尺寸的单位。em单位是相对单位，它相对于父元素的字体大小来计算。而px单位是绝对单位，它表示像素值。

使用JavaScript将em转换为px

为了将em转换为px，我们需要知道元素所在的父元素的字体大小。我们可以通过JavaScript获取这个值，并将em单位转换为相应的像素值。

function emToPx(value) {
  var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
  var pxValue = value * fontSize;
  return pxValue;
}

// 示例
var emValue = 2;
var pxValue = emToPx(emValue);
console.log(pxValue); // 输出：32

在上面的示例中，我们定义了一个名为emToPx的函数。该函数接受一个em值作为参数，并返回对应的px值。我们首先使用getComputedStyle方法获取根元素（document.documentElement）的样式，然后通过fontSize属性获取其字体大小。接下来，我们将em值乘以字体大小，返回转换后的px值。

获取默认的字体大小

有时候我们需要获取默认的字体大小（通常为16px），以便进行其他计算。我们可以使用与前面示例中相同的方法来获取根元素的字体大小。

function getDefaultFontSize() {
  var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
  return fontSize;
}

// 示例
var defaultFontSize = getDefaultFontSize();
console.log(defaultFontSize); // 输出：16

在上面的示例中，我们定义了一个名为getDefaultFontSize的函数，该函数返回根元素的默认字体大小。