如何使用按钮切换 html 文本和背景的颜色？答案

【问题标题】：How do I toggle the color of html text and background with a button?如何使用按钮切换 html 文本和背景的颜色？
【发布时间】：2020-03-18 07:15:59
【问题描述】：

我目前正在学校学习编码，需要将 3 个JavaScript 元素编码到我制作的网站中。我已经完成了 3 个元素中的 2 个，但是我正在为第三个元素苦苦挣扎。为了让视障人士更容易访问该网站，我决定尝试编写一个按钮，单击该按钮会将背景颜色从黑色更改为白色，并将文本（h1、p 和 li）从紫色更改为白色已经在正文中设置了background-color 和文本颜色，而不是样式格式。然后是另一个将颜色更改回原始颜色的按钮。我真的很感激一些帮助，因为我陷入困境，因为每个解决方案都会导致另一个死胡同。感谢您阅读并可能提供帮助。

【问题讨论】：

到目前为止你尝试过什么？你究竟在哪里卡住了？
点击按钮时你想要的颜色是什么？
@salaheddinemakdour 我希望颜色为黑色。我曾尝试搜索其他论坛并使用附加到按钮的基本标签，例如“document.h1-style='color:black'”
我已经发布了一个简单的答案，它有帮助

标签： javascript html button

【解决方案1】：

不明白您想要哪种颜色，但这里有一个将背景颜色从黑色更改为白色并将文本颜色从紫色更改为黑色的示例。 HTML

<body style="background-color: black;">
 <h1 class="text" style="color:purple;"> This is the header text </h1>
 <p class="text" style="color:purple;"> This is the paragraph </p>

 <button onclick="changeTheme();">Click me to change the theme</button
</body>

Javascript

let changeTheme = function(){
  document.querySelector('.text').style.color = 'black';
  document.querySelector('body').style.backgroundColor = 'white';
}

【讨论】：

非常感谢，使用您的方法我可以使用重置按钮将网站恢复为原始主题吗？
是的，只需制作另一个按钮和另一个将背景样式和文本样式更改为原始颜色的功能

【解决方案2】：

您可以使用 JavaScript 函数来切换网站的状态，然后通过更改 <style> 标记的 href 属性来加载不同的样式表。

function toggleHighContrast() {
    if (document.getElementById("stylesheet").getAttribute("href") === "/styles/main.css") {
        document.getElementById("stylesheet").setAttribute("href", "/styles/contrast.css");
    } else {
        document.getElementById("stylesheet").setAttribute("href", "/styles/main.css");
    }
}

<button onclick="toggleHighContrast()">Toggle High Contrast</button>

【讨论】：