javascript/css 样式并未实现到所有按钮

Question

我正在尝试自定义列表。我的代码:

<script>
for (n = 0; n < 3; n++) {
    var node = document.createElement("li");
    var btn = document.createElement("button");
    $("button").css({
        'background-color': '#CAC9DB',
        'width': '40px',
        'height': '40px',
        'font-size': '24px',
        'font-weight': 'bold'
    });
    var textnode = document.createTextNode(n);
    node.appendChild(btn);
    btn.appendChild(textnode);
    document.getElementById('list').appendChild(node);
}
</script>

问题是按钮的 css 样式只为前两个按钮实现，而没有为最后一个按钮实现。为什么最后一个按钮没有按照css样式格式化？

Answer 1

每次你绕过这个循环你:

1. 创建一个按钮
2. 改变DOM中所有按钮的样式
3. 将第 1 步中创建的按钮添加到 DOM

在将最后一个按钮放入 DOM 后，您无需重新设置所有按钮的样式。

将 $("button").css({ 更改为 $(btn).css({ 以重新设置您刚刚创建的按钮的样式(在添加之前它到 DOM)。

---

内联样式通常不是一个好主意，并且您所应用的规则没有任何动态。您可能最好只在 CSS 文件中为 button 定义样式(或者为 button.something 使用 $(btn).addClass('something' ) 如果全局样式的按钮不适合您的网站)。