如何恢复javascript对css的更改
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何恢复javascript对css的更改相关的知识，希望对你有一定的参考价值。
所以我有一个按钮，可以为我的网络应用切换一个简单的黑暗主题。
<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>
一旦用户点击它将在javascript中激活此功能。
function dark_mode() {
document.body.style.background = "#2C2F33";}
这只会改变背景。我想知道用户是否第二次点击按钮它将恢复该功能所做的更改。 （即打开/关闭）感谢您提前的时间和帮助！
答案
你可以通过切换CSS类来实现它，它是更灵活的解决方案
function dark_mode() {
document.body.classList.toggle('dark-mode')
}.dark-mode {
background: #2C2F33
}<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>另一答案
只需使用三元运算符检查并更改样式：
function dark_mode() {
document.body.style.background = document.body.style.background == "#2C2F33" ? "#FFFFFF" : "#2C2F33";
}
另一答案
如果用户再次单击，则只需再次调用该函数。因此，在第一次点击后，没有更多的变化。
更好的方法是将黑暗模式样式分配给一个类，比如“btn - dark-mode”，然后使用js来切换该类：
function dark_mode() {
document.querySelector('#dark-mode-toggle').classList.toggle('dark-mode'); // ie9+ only
}.btn--dark-mode {
background-color: #2C2F33;
}<button id="dark-mode-toggle" class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>另一答案
您可以使用data标签来跟踪当前主题：
<button class="btn btn-primary" onclick="dark_mode(this);" data-dark-theme="on" >Dark Mode ON</button>
JS：
function dark_mode(ctrl) {
var darkTheme = ctrl.getAttribute("data-dark-theme");
if(darkTheme== "on"){
ctrl.setAttribute("data-dark-theme", "off");
document.body.style.background = "#2C2F33";
ctrl.innerhtml = "Dark Mode OFF";
}
else {
ctrl.setAttribute("data-dark-theme", "on");
document.body.style.background = "#FFFFFF";
ctrl.innerHTML = "Dark Mode ON";
}
}
以上是关于如何恢复javascript对css的更改的主要内容，如果未能解决你的问题，请参考以下文章
如何在本地存储 javascript 函数所做的 css 更改？
markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发