如何使用JavaScript点击按钮修改所有列表项的颜色？

直接给你完整可运行的代码，核心逻辑就是绑定按钮点击事件，遍历所有列表项修改样式：

<ul id="list">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

<button type="button" id="btn"> Click to change all item colors black </button>

<script>
// 获取按钮元素
const btn = document.getElementById('btn');
// 获取目标列表
const list = document.getElementById('list');

// 给按钮绑定点击事件
btn.addEventListener('click', function() {
    // 获取列表下所有的li元素
    const listItems = list.querySelectorAll('li');
    // 遍历每个列表项，修改文字颜色为黑色
    listItems.forEach(item => {
        item.style.color = 'black';
        // 也可以同时修改其他样式，比如字体加粗
        // item.style.fontWeight = 'bold';
    });
});
</script>

关键步骤说明 #

• 用document.getElementById获取按钮和列表的DOM元素，这是最直接的选择器方式
• 通过addEventListener给按钮绑定click事件，点击时触发回调函数
• 用querySelectorAll('li')获取列表下所有的列表项，返回一个可遍历的节点列表
• 用forEach遍历每个列表项，直接通过style.color修改文字颜色

更灵活的方案：用CSS类控制样式 #

如果后续需要修改样式，直接改CSS类比修改style属性更易维护，示例如下：

<style>
.black-text {
    color: black;
    font-weight: 500;
}
</style>

<ul id="list">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

<button type="button" id="btn"> Click to change all item colors black </button>

<script>
const btn = document.getElementById('btn');
const list = document.getElementById('list');

btn.addEventListener('click', function() {
    const listItems = list.querySelectorAll('li');
    listItems.forEach(item => {
        // 添加CSS类
        item.classList.add('black-text');
        // 如果需要切换样式，可以用toggle：item.classList.toggle('black-text');
    });
});
</script>

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