获取元素宽度百分比

问题描述 投票:0回答:1

我有一个输入元素,其宽度在 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%

javascript css dom
1个回答
0
投票

使用 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%';
});
© www.soinside.com 2019 - 2024. All rights reserved.