我有一个输入元素,其宽度在 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%
使用 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%';
});