在 html/css 中切换页面背景颜色 [关闭]答案

【问题标题】：Toggle pages backgroundcolor in html/css [closed]在 html/css 中切换页面背景颜色 [关闭]
【发布时间】：2017-02-10 14:08:54
【问题描述】：

在我的 HTML/CSS 页面上，我需要一个开关来切换背景颜色和文本颜色。（例如黑色主题到白色主题）。有没有办法做到这一点？

【问题讨论】：

标签： javascript html css web

【解决方案1】：

看看这个：

$("#toggleTheme").click(function(){
$(".container").toggleClass("black");
});

.container {
	background: #fff;
	color: #000;
}
.black {
	background: #000;
	color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button class="btn btn-primary" id="toggleTheme">Toggle Theme</button>

<div class="container">
	<h1>Welcome</h1>
	<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>

【讨论】：

【解决方案2】：

在 jQuery 中尝试这样的操作：

$("#button").click(function () {
   $(document.body).toggleClass("black");
});

CSS:

body { background-color: white; }
.black { background-color: black; }

【讨论】：