[英]Add toggle to jQuery mouseover event to trigger CSS color change
[英]Jquery Toggle CSS Color Change
基本上我想创建的是我网站的夜间模式按钮...
经过研究,这就是我能够做的...
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;
}
您可以使用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>
我将在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;
}
});
希望这能解决!
狮子座
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.