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> 

它的工作正常，沒有任何問題...但是我要做的是，除了此之外，還可以在我的樣式表中修改特定類的背景色。.Im正在使用Wordpress主題閃爍...

當我添加上面的代碼時，它會更改背景，但不會更改Post（內容）背景色……這是需要更改背景的類……其在我的stylesheet.css文件中……

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

Answer 1

您可以使用querySelectorAll或getElementsByClassName來選擇具有所需CSS類的元素，循環遍歷它們並設置所需的樣式。 這是使用getElementsByClassName的示例：

 var activated = 0; document.getElementById("cmn-toggle-1").addEventListener('click', function() { // get the post-inner-content nodes var postInnerDivs = document.getElementsByClassName('post-inner-content'); if (activated == 0) { document.body.style.backgroundColor = "black"; document.body.style.color = "white"; //iterate through each node/div and set the appropriate style Array.prototype.forEach.call(postInnerDivs, function(div) { div.style.backgroundColor = "black"; div.style.color = "white"; }); activated = 1; } else { document.body.style.backgroundColor = "white"; document.body.style.color = "black"; //iterate through each node/div and set the appropriate style Array.prototype.forEach.call(postInnerDivs, function(div) { div.style.backgroundColor = "white"; div.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; } .post-inner-content { padding: 45px 50px; background-color: #fff; border: 1px solid #dadada; border-top: none; } 

 <div class="switch"> <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-1"></label> </div> <div class="post"> <div class="post-inner-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam justo nibh, blandit nec tristique volutpat, luctus in massa. Nulla ut aliquam ligula. Nullam ac fringilla justo, </div> </div> <div class="post"> <div class="post-inner-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam justo nibh, blandit nec tristique volutpat, luctus in massa. Nulla ut aliquam ligula. Nullam ac fringilla justo, </div> </div> <div class="post"> <div class="post-inner-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam justo nibh, blandit nec tristique volutpat, luctus in massa. Nulla ut aliquam ligula. Nullam ac fringilla justo, </div> </div> 

Answer 2

我將在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;
    }
});

希望這能解決！

獅子座