How can I conditionally change css styles with js?

Question

I\'d like to implement some javascript that uses an if statement to change some css styles. Not sure how to do it, any help would be great!

Answer 1

If you want to change a single style of an element using JavaScript, use

document.getElementById(id).style.property = new style

eg :

document.getElementById("myDiv").style.color= "red";

To add a new CSS class to an element, use

document.getElementById(id).classList.add("mystyle");

To remove

document.getElementById(id).classList.remove("mystyle");

Demo :

function changeSingleStyle() {
  var color = document.getElementById("myDiv").style.color;
  if (color === "red")
    document.getElementById("myDiv").style.color = "yellow";
  else
    document.getElementById("myDiv").style.color = "red";
}
function addClass() {
    document.getElementById("myDiv").classList.add("mystyle");
}
function removeClass() {
    document.getElementById("myDiv").classList.remove("mystyle");
}

.mystyle {
  color : red;
  background: green;
  font-size: 50px;
}

 This is a div 
changeSingleStyle
addClass
removeClass