我希望在单击按钮时更改页面的 CSS

Question

I found how you could do this with individual elements but I couldn't find anything that would change the the body CSS of a page.我找到了如何使用单个元素执行此操作，但找不到任何会更改页面正文 CSS 的内容。 I am trying to make a thing where it will switch between light and dark mode when you click the button.我正在尝试制作一个当您单击按钮时它将在明暗模式之间切换的东西。

<!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

Best way to set a dark-mode on your website is to toggle a class .dark-mode on your body using javascript and then stylize it using css:在您的网站上设置暗模式的最佳方法是使用 javascript 在您的身体上切换类.dark-mode ，然后使用 css 对其进行.dark-mode化：

 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>

Answer 2

You're trying to target an element with a class using an incorrect method.您正在尝试使用不正确的方法定位具有类的元素。 getElementById targets elements with a specified id . getElementById以具有指定id元素为目标。 If you're trying to target a class, the most ideal method to do this with is querySelector :如果您尝试定位一个类，最理想的方法是使用querySelector ：

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

我希望在单击按钮时更改页面的 CSS

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-02-15 14:41:25

解决方案2
0 2020-02-15 14:37:12

我希望在单击按钮时更改页面的 CSS

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-02-15 14:41:25

解决方案2 0 2020-02-15 14:37:12

解决方案1
2 已采纳 2020-02-15 14:41:25

解决方案2
0 2020-02-15 14:37:12