我希望页面的 CSS 在单击按钮时发生变化

Question

我找到了如何对单个元素执行此操作，但我找不到任何可以更改页面主体 CSS 的内容。我正在尝试做一个东西，当你点击按钮时它会在明暗模式之间切换。

<!DOCTYPE html>
<button style="background-color: #252525;
border: 2px;
border-style: solid;
border-color: white;
color: white; 
padding: 10px 32px;
text-align: center;
text-decoration: none; 
display: inline-block;
font-size: 16px;  
font-weight: bold;
margin: 4px 2px;
cursor: pointer;" id="changethemebutton" onclick="changeTheme()">Change Theme</button>

function changeTheme() {
document.getElementById(".background").style.background = "black";
}
</script>
<style>
body{
    background-color:white
}
</style>

Answer 1

您正在尝试使用不正确的方法定位具有 class 的元素。 getElementById targets elements with a specified id. If you're trying to target a class, the most ideal method to do this with is querySelector:

document.querySelector(".background").style.background = "black";

Answer 2

在您的网站上设置 dark-mode 的最佳方法是使用 javascript 在您的 body 上切换 class .dark-mode，然后使用css:

body {
  /* light-mode styles */
  background-color: white;
}

body.dark-mode {
  /* dark-mode styles */
  background-color: black;
}

<button style="background-color: #252525;
border: 2px;
border-style: solid;
border-color: white;
color: white; 
padding: 10px 32px;
text-align: center;
text-decoration: none; 
display: inline-block;
font-size: 16px;  
font-weight: bold;
margin: 4px 2px;
cursor: pointer;" id="changethemebutton" onclick="changeTheme()">Change Theme
</button>

<script>
  function changeTheme() {
    document.body.classList.toggle('dark-mode');  // <-- Toogle dark-mode class to <body>
  }
</script>

我希望页面的 CSS 在单击按钮时发生变化

I want the CSS of a page to change when a button is clicked

html

javascript

css

innerhtml