为何按钮padding属性未生效？JS循环设置样式无效问题排查

你的问题核心是执行样式设置的时机不对：
当你调用document.querySelectorAll(".common")时，这些通过createElement创建的按钮还没有被添加到DOM树中（buttonMenu.append是在样式循环之后才执行的），所以buttons是一个空的节点列表，forEach循环根本没有执行，自然看不到样式变化。

修正方案1：调整代码顺序，先添加按钮到DOM再设置样式 #

把buttonMenu.append移到样式循环之前，确保DOM里已经存在这些按钮，querySelectorAll才能找到它们：

const togglePen = document.createElement('button')
togglePen.innerText="Toggle pen"
togglePen.classList.add("common")

const toggleColor = document.createElement('button')
toggleColor.innerText = 'Toggle color'
toggleColor.classList.add("common")

const eraser = document.createElement('button')
eraser.innerText = 'Eraser'
eraser.classList.add("common")

const reset = document.createElement('button')
reset.innerText = 'Reset'
reset.classList.add("common")

// 先将按钮添加到DOM
buttonMenu.append(togglePen, toggleColor, eraser, reset)

// 再查找并设置样式
const buttons = document.querySelectorAll(".common")
buttons.forEach(button => {
    button.style.padding = '10px'
});

修正方案2：直接操作已创建的按钮数组（更高效） #

不需要通过querySelectorAll查找，直接把创建好的按钮放进数组，循环设置样式：

// 创建所有按钮
const togglePen = document.createElement('button')
togglePen.innerText="Toggle pen"
togglePen.classList.add("common")

const toggleColor = document.createElement('button')
toggleColor.innerText = 'Toggle color'
toggleColor.classList.add("common")

const eraser = document.createElement('button')
eraser.innerText = 'Eraser'
eraser.classList.add("common")

const reset = document.createElement('button')
reset.innerText = 'Reset'
reset.classList.add("common")

// 将按钮存入数组
const buttons = [togglePen, toggleColor, eraser, reset]
// 直接循环数组设置样式
buttons.forEach(button => {
    button.style.padding = '10px'
});

// 批量添加到DOM
buttonMenu.append(...buttons)

更推荐的方案：用CSS类统一控制样式 #

比起用JS设置内联样式，直接在CSS里定义.common类的样式更易维护，且不需要考虑DOM添加时机：

.common {
    padding: 10px;
    /* 可以额外加margin让按钮之间有间隔，避免紧密排列 */
    margin: 0 6px;
}

这样只要按钮添加了common类，不管什么时候被添加到DOM，样式都会自动生效。

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