js中宽高怎么设置成rem

在JavaScript中设置宽高为rem的几种方法

在JavaScript中设置元素的宽高为rem，可以通过多种方式实现，包括直接操作DOM元素的样式属性、使用CSS变量以及结合媒体查询等。直接使用style属性、动态计算基准值、结合CSS变量都是常用的方法。下面详细介绍其中一种方法：直接使用style属性，并提供代码示例。

一、直接使用style属性

直接使用style属性是最简单的方法之一。你可以通过JavaScript直接设置元素的style属性来应用rem单位的宽高。

1. 获取基准字体大小

首先，我们需要获取根元素（通常是html元素）的字体大小，因为rem是基于根元素的字体大小计算的。假设根元素的字体大小是16px，那么1rem等于16px。

const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

2. 设置宽高

接下来，我们可以通过计算得出需要设置的rem值，并应用到元素上。

const element = document.getElementById('myElement'); // 获取需要设置宽高的元素
const widthInPx = 32;  // 例如，想要设置宽度为32px
const heightInPx = 48; // 例如，想要设置高度为48px
const widthInRem = widthInPx / rootFontSize;  // 将像素值转换为rem
const heightInRem = heightInPx / rootFontSize;
element.style.width = `${widthInRem}rem`;  // 设置宽度
element.style.height = `${heightInRem}rem`; // 设置高度

二、动态计算基准值

在实际应用中，根元素的字体大小可能会变化，这时我们需要动态计算基准值。

function setElementSizeInRem(elementId, widthInPx, heightInPx) {
    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
    const widthInRem = widthInPx / rootFontSize;
    const heightInRem = heightInPx / rootFontSize;
    const element = document.getElementById(elementId);
    if (element) {
        element.style.width = `${widthInRem}rem`;
        element.style.height = `${heightInRem}rem`;
    } else {
        console.error(`Element with id ${elementId} not found`);
    }
}
setElementSizeInRem('myElement', 32, 48); // 示例调用

三、结合CSS变量

CSS变量可以简化rem的使用，使得代码更具可读性和可维护性。

1. 定义CSS变量

首先在CSS中定义一个CSS变量，表示根元素的字体大小。

:root {
    --root-font-size: 16px;
}
#myElement {
    width: calc(2 * var(--root-font-size));
    height: calc(3 * var(--root-font-size));
}

2. 在JavaScript中使用CSS变量

我们可以在JavaScript中获取并使用这些CSS变量。

const rootFontSize = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--root-font-size'));
function setElementSizeUsingCSSVariable(elementId, widthInPx, heightInPx) {
    const widthInRem = widthInPx / rootFontSize;
    const heightInRem = heightInPx / rootFontSize;
    const element = document.getElementById(elementId);
    if (element) {
        element.style.setProperty('width', `${widthInRem}rem`);
        element.style.setProperty('height', `${heightInRem}rem`);
    } else {
        console.error(`Element with id ${elementId} not found`);
    }
}
setElementSizeUsingCSSVariable('myElement', 32, 48); // 示例调用

四、总结

通过以上几种方法，我们可以灵活地在JavaScript中设置元素的宽高为rem单位。直接使用style属性、动态计算基准值、结合CSS变量各有优缺点，可以根据实际需求选择合适的方法。