6

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!

dylan
  • 143
  • 1
  • 2
  • 11
  • Do you want to change all the relevant elements that are associated with a css declaration on the page or just a single element? –  Apr 13 '16 at 01:57
  • just a single element @jeff – dylan Apr 13 '16 at 02:03
  • 1
    Possible duplicate of [How can you change the attached CSS file with Javascript?](http://stackoverflow.com/questions/24086973/how-can-you-change-the-attached-css-file-with-javascript) – mmativ Apr 13 '16 at 02:11

4 Answers4

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";
}
jessegavin
  • 74,067
  • 28
  • 136
  • 164
Erick
  • 823
  • 16
  • 37
2

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>
Munawir
  • 3,346
  • 9
  • 33
  • 51
0
function barHtml (percent) {
        
 return `
       <div class= "${percent>25 ? "class1":" class2"}"
          style="width: ${percent}%;">
      </div>`
    }

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

Uni.inf M
  • 11
  • 2
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/31490263) – Ethan Apr 12 '22 at 01:15
0

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.

ethry
  • 731
  • 6
  • 17