为什么通过JS单独赋值元素四个padding方向不生效？如何修复？

• 你每次赋值都重复调用document.getElementsByClassName('board')[0]，该接口返回的是实时HTMLCollection，赋值过程中如果页面触发重排导致board类元素列表变更，后续的赋值可能操作到非预期元素，四次赋值过程中出现元素切换的概率高于三次赋值，就会出现你遇到的现象。
• 另一种更常见的场景是你的项目中存在样式监听类脚本，当检测到四个方向padding值完全一致时，会自动将四个单独的padding属性合并为padding简写属性，合并过程可能出现值错误，也可能简写属性被更高优先级的CSS规则（比如带!important标记的padding规则）覆盖；而只设置三个方向时不会触发合并逻辑，单独的padding属性优先级足够所以能正常生效。

首先优化DOM查询逻辑，缓存目标元素避免重复查询和实时集合带来的元素错位问题，同时直接使用padding简写属性一次性设置所有方向的边距，代码更简洁也不会触发自动合并逻辑：

const pd = 1
// 缓存目标DOM元素，只查询一次
const board = document.querySelector('.board')
// 一次性设置四个方向padding
board.style.padding = pd + 'px'

如果你的CSS规则中存在带!important的padding声明导致普通内联样式无法覆盖，可以使用setProperty方法强制添加!important标记：

board.style.setProperty('padding', pd + 'px', 'important')

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