Question

我目前正在学校学习编码，需要将3个JavaScript元素编码到我创建的网站中。我已经完成了3个要素中的2个，但是我正在为第三个要素奋斗。为了使视障人士更容易访问该网站，我决定尝试对按钮进行编码，单击该按钮后，背景色将从黑色变为白色，文本（h1，p和li）从紫色变为白色已经在主体中设置了background-color和文本颜色，而不是样式格式。然后另一个按钮将颜色更改回原始颜色。我真的很感谢您的帮助，因为每一个解决方案都会导致另一个死胡同。感谢您的阅读和帮助。

Answer 1

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

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>

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';
}

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

2 个答案: