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主题闪耀......

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

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

Answer 1

您可以使用querySelectorAll或getElementsByClassName选择具有所需CSS类的元素，循环浏览它们并设置所需的样式。以下是使用getElementsByClassName：

的示例

＆＃13;

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;
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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;
    }
});

希望这能解决它！

利奥。

Jquery切换CSS颜色变化

2 个答案: