使用x[i].style.padding将text类元素CSS padding减半的代码为何失效？

嘿，我太懂你这种困惑了——这个问题其实是操作DOM样式时非常典型的新手坑！

为什么你的代码没法运行？ #

核心问题出在element.style.padding的局限性上：

• 这个属性只能读取写在元素标签里的内联样式（比如<div class="text" style="padding: 20px;">），如果你的padding是通过CSS类、外部样式表或者<style>标签定义的，它返回的就是空字符串，自然没法计算一半的值。
• 你用getElementById能拿到值，大概率是那个目标元素刚好写了内联style属性，而class为text的元素并没有，所以才会出现“同方法不同结果”的情况。

正确的实现方式 #

要获取元素实际生效的样式，必须用window.getComputedStyle()，它能拿到浏览器计算后的最终样式值，不管样式来源是哪里。下面是完整的可运行代码：

// 获取所有class为text的元素，querySelectorAll返回的NodeList支持forEach遍历
const textElements = document.querySelectorAll('.text');

textElements.forEach(element => {
  // 获取当前元素的计算后样式
  const computedStyle = window.getComputedStyle(element);
  
  // 提取padding的数值（这里默认处理的是上下左右一致的padding）
  // 如果你需要单独处理上下/左右，就用computedStyle.paddingTop、paddingRight等
  const currentPaddingValue = parseInt(computedStyle.padding, 10);
  
  // 计算一半的值，加上单位（这里假设是px，其他单位如em/rem同理）
  const newPadding = `${currentPaddingValue / 2}px`;
  
  // 给元素设置新的padding（内联样式会覆盖原有样式）
  element.style.padding = newPadding;
});

额外注意事项 #

• 如果你的元素设置的是不对称padding（比如padding: 10px 20px 15px 5px），那computedStyle.padding会返回四个值的组合，这时候你需要分别处理paddingTop、paddingRight、paddingBottom、paddingLeft四个属性，每个单独计算一半后再赋值。
• 单位兼容：如果用的是em、rem等相对单位，parseInt同样能提取数值，计算后加回单位即可，但要注意相对单位的继承特性哦。

内容的提问来源于stack exchange，提问作者Rick Sibley