'How can I conditionally change css styles with js?

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!

javascriptcss


Solution 1:[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;
}
<div id="myDiv"> This is a div </div>
<button onclick="changeSingleStyle()">changeSingleStyle</button>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>

Solution 2:[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";
}

Solution 3:[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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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.

Solution 4:[4]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Munawir
Solution 2 jessegavin
Solution 3 ethry
Solution 4

Related Questions