如何获取CSS设置的元素百分比宽度并实现元素包裹

问题原因分析 #

1. el.style.width为空的原因：element.style仅能读取元素的行内样式，而你的宽度是通过外部CSS类（如.test1）设置的，因此无法通过这个属性获取到值。
2. 计算比例偏差的原因：clientWidth包含元素的内容宽度+内边距（padding），如果父元素存在内边距、边框，或者input本身有padding/border，都会导致计算出的百分比与原CSS设置的纯宽度百分比不符；另外，像素与百分比的换算会受容器实际宽度的像素值影响，容易出现小数偏差。
3. getComputedStyle的局限性：该方法返回的是浏览器计算后的实际像素值，换算回百分比时无法还原CSS中设置的精确整数值。

解决方案：从CSS规则中提取原始百分比值 #

直接遍历页面所有样式表，找到匹配当前元素的CSS规则，从中提取设置的宽度百分比值，这样能保证完全还原原始设置。

完整代码实现 #

// 提取元素原始CSS中设置的宽度百分比
function getOriginalWidthPercentage(element) {
  let widthPercent = null;
  // 遍历所有样式表
  for (const sheet of document.styleSheets) {
    try {
      const rules = sheet.cssRules || sheet.rules;
      // 遍历当前样式表的所有规则
      for (const rule of rules) {
        // 检查元素是否匹配当前规则的选择器
        if (element.matches(rule.selectorText)) {
          const widthValue = rule.style.getPropertyValue('width');
          // 判断是否为百分比格式的宽度值
          if (widthValue && widthValue.endsWith('%')) {
            widthPercent = widthValue;
            // 找到匹配的规则后立即返回（优先级更高的规则会在后遍历到，可根据需求调整）
            return widthPercent;
          }
        }
      }
    } catch (e) {
      // 跨域样式表无法读取，直接跳过
      continue;
    }
  }
  return widthPercent;
}

// 为每个.display-class元素添加包裹层
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 originalWidth = getOriginalWidthPercentage(el);
  if (originalWidth) {
    wrap.style.width = originalWidth;
  } else {
    //  fallback：当无法读取CSS规则时，使用计算方式近似匹配
    const parentContentWidth = wrap.parentElement.clientWidth;
    if (parentContentWidth > 0) {
      wrap.style.width = `${Math.round((el.clientWidth / parentContentWidth) * 10000) / 100}%`;
    }
  }
  
  // 将input宽度设为100%以填满包裹层
  el.style.width = '100%';
});

注意事项 #

• 跨域样式表处理：如果页面引入了其他域名的样式表，浏览器会限制访问其cssRules，此时会自动降级到计算百分比的 fallback 方案。
• CSS规则优先级：上述代码会返回第一个匹配到的百分比宽度规则，如果存在多个优先级更高的规则（如行内样式、ID选择器），可以调整逻辑，收集所有匹配的规则后按CSS优先级排序，取最高优先级的宽度值。
• 盒模型影响：如果你的元素设置了box-sizing: border-box，clientWidth的计算会包含边框和内边距，此时fallback的计算结果会更接近原始百分比，但仍推荐优先使用CSS规则提取的方式。

内容的提问来源于stack exchange，提问作者4Redcross