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!

Accepted Answer

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

<div id="myDiv"> This is a div </div>
<button onclick="changeSingleStyle()">changeSingleStyle</button>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>

Answer 2

First of all, to change CSS using JavaScript, the syntax looks like the following:

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

For example, if you want to change the display property of an element with id = "container" to block, it would be:

document.getElementById("container").style.display = "block";

Given this, you could easily add an IF statement depending on what condition you want. For example:

if(condition)
{
     document.getElementById("container").style.display = "block";
}

Answer 3

You can do this with .style.property or .style.cssText

function myStyleFunction() {
  document.getElementById('styled').style.color = 'red';
}

function myStyleFunctionCssText() {
  document.getElementById('styled2').style.cssText = 'color: lime';
}

<button onclick="myStyleFunction();" id="styled">
  Style with .style.color
</button>

<button onclick="myStyleFunctionCssText();" id="styled2">
  Style with .style.cssText
</button>

With this code, the button on the left will go red, the one on the right will go lime.

You can also do this easily with jQuery.

function myStyleFunction() {
  $(".style").css("color", "magenta");
}

<script src=""></script>

<button class="style" onclick="myStyleFunction();">Style by class</button>

<button class="style">Style by class 2</button>

This code changes all elements in the classes color to magenta if you click the first button.

Answer 4

function barHtml (percent) {
        
 return `
       <div class= "${percent>25 ? "class1":" class2"}"
          style="width: ${percent}%;">
      </div>`
    }

document.body.innerHTML=<div>${barHtml(20)}</div>

How Can I Conditionally Change Css Styles with Js?

4 Answers

Must Read

Your Answer

Elena Rostova

How Can I Conditionally Change Css Styles with Js?

4 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Elena Rostova