如何一键更改多个对象的颜色？

【问题标题】：How to change the color of multiple objects with one button?如何一键更改多个对象的颜色？
【发布时间】：2023-04-02 12:35:01
【问题描述】：

我想一键更改多个对象（页脚、div、文本）的背景颜色和文本颜色。我尝试使用按钮 javascript，但我不想命名多个对象按钮来更改它们的颜色。谢谢

【问题讨论】：

你好。你为此做了什么？请显示您的代码。
使用类选择器？

标签： javascript html jquery css

【解决方案1】：

试试这个首先创建一个 id 为“btnChangeColor”的按钮 HTML

<button id="btnChangeColor" class="btn btn-primary">Change Color</button>

使用 JavaScript 添加监听器，使用 DOM 获取所有要更改的元素。

const btnChangeColor =    document.querySelector('#btnChangeColor');
const footer =            document.querySelector('footer');
const divs =              document.querySelectorAll('div');

btnChangeColor.addEventListener('click', () => {
    footer.classList.add('custom-theme');
    divs.forEach(item => {
        item.classList.add('custom-theme');
    });
});

您可以使用您喜欢的值自定义类 CSS（自定义主题）

.custom-theme {
    background-color: green;
    color: white;
}

【讨论】：