Jquery Toggle CSS Color Change

Question

Basically what im trying to create is a night mode button for my site...

After looking into things this is what i was able to make...

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>

Its working fine without any problem... But what i want to do is, in addition to this modify a specific class's backgroud color in my STYLESHEET.. Im Using Wordpress Theme Sparkling...

When i add the above code, it changes the background but not the Post (Content) Background color... This is the class which's background needs to be changed... its on my stylesheet.css file...

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

Leo · Accepted Answer · 2016-10-22 15:36:45Z

I would add in the JavaScript Code what you want, for example:

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

Hope this solves it !

Leo.

xorspark · Accepted Answer · 2016-10-22 15:44:28Z

You can use querySelectorAll or getElementsByClassName to select elements with the desired CSS class, loop through them and set the desired styles. Here's an example using 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>

Collectives™ on Stack Overflow

Jquery Toggle CSS Color Change

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related