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>

何の問題もなく正常に動作してその...しかしある私は何をしたい、これに加えて、ImはスパークリングWordpressのテーマを使用して...私のスタイルシートで特定のクラスのその背景の色を変更...

私は上記のコードを追加すると、背景は変更されますが、投稿（コンテンツ）の背景色は変更されません...これは、背景の変更が必要なクラスです...そのstylesheet.cssファイル...

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

Answer 1

あなたはそれらを介して必要なCSSクラスを持つ要素は、ループを選択し、希望のスタイルを設定するquerySelectorAllかgetElementsByClassNameを使用することができます。ここで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; 
    } 
}); 

が、これはそれを解決ホープ！

レオ。