javascript - Jquery 切换 CSS 颜色变化

Question

基本上，我要为我的网站创建一个夜间模式按钮...

在调查之后，这就是我能够做出的...

var activated = 0;
document.getElementById("cmn-toggle-1").addEventListener('click', function () {
    if (activated == 0) {
        document.body.style.backgroundColor = "black";
        document.body.style.color = "white";
	activated = 1;
    } else {
        document.body.style.backgroundColor = "white";
        document.body.style.color = "black";
        activated = 0;
    }
});

.cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 60px;
    height: 30px;
    background-color: #dddddd;
    border-radius: 30px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 30px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 30px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 30px;
  }

<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>

它工作正常，没有任何问题......但我想做的是，除了修改我的 STYLESHEET 中特定类的背景颜色之外......我正在使用 Wordpress Theme Sparkling......

当我添加上面的代码时，它会更改背景但不会更改 Post(内容)背景颜色...这是需要更改背景的类...它在我的 stylesheet.css 文件中...

.post-inner-content {
  padding: 45px 50px;
  background-color: #fff;
  border: 1px solid #dadada;
  border-top: none;
}

Answer 1

我会在 JavaScript 代码中添加您想要的内容，例如:

var activated = 0;
document.getElementById("cmn-toggle-1").addEventListener('click', function () {
    if (activated == 0) {
        document.body.style.backgroundColor = "black";
        document.body.style.color = "white";
        //Get all post-inner-content from page
        var postContent = document.getElementsByClassName("post-inner-content");
        //Cycle through each one of them and change their styles
        var i;
        for (i = 0; i < postContent.length; i++) {
            postContent[i].style.backgroundColor = "black";
            postContent[i].style.color = "white";
        }
        document.getElementByClass.style.color = "white";
        activated = 1;
    } else {
        document.body.style.backgroundColor = "white";
        document.body.style.color = "black";
        //Get all post-inner-content from page
        var postContent = document.getElementsByClassName("post-inner-content");
        //Cycle through each one of them and change their styles
        var i;
        for (i = 0; i < postContent.length; i++) {
            postContent[i].style.backgroundColor = "white";
            postContent[i].style.color = "black";
        }        
        activated = 0;
    }
});

希望这能解决问题!

狮子座。