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"; 
 
\t 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>

它沒有任何問題做工精細......但我想要做的是，除了這個修改特定類的研究背景顏色在我的樣式表..即時通訊使用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; 
    } 
}); 

希望這會解決它！

獅子座。