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

Question

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

3

我正在学校学习编码，需要将3个 JavaScript 元素编码到我制作的网站中。我已经完成了其中2个元素，但第三个有些困难。为了让这个网站更适用于视觉障碍者，我决定尝试编写一个按钮，点击后可以将背景颜色从黑色改变为白色，并将文本（h1、p和li）从紫色改变为白色。我已经在正文中设置了 background-color 和文本颜色，而不是使用样式格式。然后再加一个按钮，将颜色改回原始状态。由于每个解决方案都导致另一个死路，因此我真的很需要帮助。感谢您的阅读和可能的帮助。

- Luca_codr

你目前尝试了什么？你具体卡在哪里了？ - Nico Haase

点击按钮时您想要的颜色是什么？ - Salah Eddine Makdour

@salaheddinemakdour 我希望颜色是黑色的。我已经尝试在其他论坛上搜索并使用基本标签附加到按钮，例如“document.h1-style ='color：black'”。 - Luca_codr

我已经发布了一个简单的答案，希望它有所帮助。 - Salah Eddine Makdour

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user12359228 · Answer 1

您可以使用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>

- Salah Eddine Makdour · Answer 2

不太清楚您想要哪些颜色，但这里有一个将背景颜色从黑色改为白色，文本颜色从紫色改为黑色的示例。 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';
}