Toggle style of an element

Question

At first time, when we click over the button, I want a script to change style of the span into color:#eee; and for second click, I want to change it into color:#000; and do this over and over again. How to toggle these styles of an element? Is it possible to do, with normal JavaScript (no jQuery)? I have found something at here:jQuery click / toggle between two functions But I don't know how to use jQuery.

<span class="blue">
Hi
</span>
<button>
Change
</button>

I want to toggle the class attribute, so that I could add my whole change-needed code into another class as class="red" How to toggle style of this tag into class="red" and class="Blue" ?

Sorry. SO is not a code writing service. On SO, you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a **[Minimal, Complete, and Verifiable example](//stackoverflow.com/help/mcve)**. — Rob, Oct 05 '17 at 23:53
You already know how to solve this, and you're linking to the solution right in your question...? Why even post this? It's going to be closed really fast. — , Oct 06 '17 at 00:03
@Jishnuraj yeah... I'm aware of that. But you already know how to fix that, too! Learn jQuery. SO isn't the website you need. — , Oct 06 '17 at 09:51

P.S. · Accepted Answer · 2017-10-06T16:13:17.783

Here is a simple example:

var span = document.getElementsByTagName('span')[0];
function changeStyle() {
  if(span.style.color === 'red') {
    span.style.color = 'black';
  } else {
    span.style.color = 'red'
  }
}

<span>
Hi
</span>
<button onclick="changeStyle()">
Change
</button>

Update

"Why isn't this code working? code in comment"

There are few issues with your code. At first, your script should go after HTML tags, because when we are doing var span = document.getElementById('span');, the element with id span should be already defined, otherwise we will get null. To find other differences compare your code with code below:

<style> .red { color:red; } .blue { color:blue; } </style>

<span class="red" id="span"> Hi </span> 
<button onclick="changeStyle()"> Change </button>

<script> 
var span = document.getElementById('span');
function changeStyle() {
  for(var i = 0; i < span.classList.length; i++) {
    if(span.classList[i].indexOf('red') >= 0) {
      span.classList.remove('red');
      span.classList.add('blue');
    } else { 
      span.classList.remove('blue');
      span.classList.add('red'); 
    }
  }
}
</script>

Can I change the class attribute to class="red_class" and class="blue"? — Jishnuraj, Oct 06 '17 at 02:15
It's code will be more easy, so that I could even toggle other styles with it. — Jishnuraj, Oct 06 '17 at 02:16
@Jishnuraj, it's possible, just use `.classList.add('class-name')` and `.classList.remove('class-name')` — P.S., Oct 06 '17 at 11:29

score 1 · Answer 2 · answered Oct 05 '17 at 23:50

1

You can do this with a CSS class. If you set up a class that contains the styling you want then you can simply toggle it on and off.

The Javascript for that would look something like this:

var elem = document.querySelector(yourElement);

elem.addEventListener("click", function() {
    elem.classList.toggle("className");
}

answered Oct 05 '17 at 23:50

Luke Glazebrook

580
2
14

1

How to toggle different class attributes as class="red" and class="blue" ? – Jishnuraj Oct 06 '17 at 02:24

Toggle style of an element

2 Answers2

Update