获取元素宽度百分比

Question

我有一个输入元素，其宽度在 css 中设置为百分比。所有这些元素都有一个共同的类“display-class”

例如。

input.test1 {
   width: 60%
}

现在在 JS 中，我尝试为该元素设置一个包装 div。我希望包装器 div 具有输入字段的宽度并将输入字段的宽度设置为 100%

我当前的 JS 代码如下 -

document.querySelectorAll('.display-class').forEach((el) => {
    const wrap = document.createElement('div');
    wrap.classList.add('display-class-wrap');
    el.parentNode.insertBefore(wrap, el);
    wrap.appendChild(el);
    wrap.style.width = el.style.width;
    el.style.width = '100%';
});

当我尝试记录两个元素的宽度时，它返回输入元素长度的空字符串。

我也尝试通过自己计算百分比来设置宽度，就像这样，

wrap.style.width = `${(el.clientWidth/wrap.parentElement.clientWidth)*100}%`;

但它返回的宽度为浮点值，与原始宽度设置相差甚远。例如。 60% 的回报率为 55.925%

Answer 1

使用 getCompulatedStyle 获取输入元素的计算样式

document.querySelectorAll('.display-class').forEach((el) => {
    const wrap = document.createElement('div');
    wrap.classList.add('display-class-wrap');
    el.parentNode.insertBefore(wrap, el);
    wrap.appendChild(el);
    
    const computedStyle = window.getComputedStyle(el);
    wrap.style.width = computedStyle.width;    
    el.style.width = '100%';
});