在現如今網頁設計方興未艾的時代，像素 (px) 已經成為了一個設計量度的主流模式。然而，相對尺寸單位 (em) 也常被許多設計師所采用，這種單位的使用使得網頁中的文字大小可相應地調整。那么，如果在設計中要使用像素單位而手中的只有相對大小的值，該怎么辦呢？在這里，我們將向大家介紹如何使用 JavaScript 將相對大小單位的值轉換為像素單位。 首先，我們來看看如何將一個按照 em 值設定的字號，轉換為像素大小。下面的代碼示例將演示如何將字號為 1em 的文本轉換為像素大小。

var emSize = parseFloat(getComputedStyle(document.body).fontSize);
var pxSize = 1 * emSize;
// 在控制臺中顯示像素大小
console.log(pxSize + 'px');

如上述代碼所示，我們可以使用瀏覽器的 getComputedStyle 函數來獲得相對大小的引用。這里應使用 document.body，因為此元素上的 font-size 屬性可以將 em 值轉換為對應的像素值。接下來，我們將獲取到的 em 大小值用于計算出像素大小，然后在瀏覽器的控制臺中輸出結果。 另一種常見的情況是在 CSS 樣式表中找到 em 的數值。比如一個按鈕的高度設置為 2.5em，而你需要將其轉換為像素值。

var buttonHeightInEm = 2.5;
var emSize = parseFloat(getComputedStyle(document.body).fontSize);
var buttonHeightInPx = buttonHeightInEm * emSize;
// 在控制臺中顯示像素大小
console.log(buttonHeightInPx + 'px');

與上面的例子類似，我們只需設置一個變量，將 em 數值乘以獲取到的像素大小，就能輕松地換算出對應的像素大小。 最后，我們再來看一個例子，假設一個容器內包含多個不同大小的文本塊，這些文本塊使用的都是相對大小單位的字體值，那么如何將它們全部轉換為像素大小呢？

var allEm = document.querySelectorAll('div');
Array.prototype.forEach.call(allEm, function(em) {
var emSize = parseFloat(getComputedStyle(document.body).fontSize);
var pxSize = window.getComputedStyle(em, null).getPropertyValue('font-size');
pxSize = parseFloat(pxSize) * emSize;
em.style.fontSize = pxSize + 'px';
});

在這個例子中，我們首先使用 document.querySelectorAll 獲取到所有要操作的文本塊，然后使用 forEach 函數遍歷它們。接下來，我們針對每個文本塊都獲取到其當前字體值的像素大小，計算出最終的像素值，通過覆蓋原始文本塊字體值的方式來將相對大小單位轉換為像素大小。 一般而言，我們經常使用像素的大小來設計網頁，但有時卻無法避免使用相對大小的值。這時，JavaScript 的計算功能就尤為重要了。只要掌握了這里介紹的方法，轉換像素大小就變得非常簡單。