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" ?

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" ?

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 6, 2017 at 2:21 Jishnuraj asked Oct 5, 2017 at 23:47 JishnurajJishnuraj 14922 gold badges33 silver badges1111 bronze badges 4

• 8 Sorry. SO is not a code writing service. On SO, you are expected to try to write the code yourself. After doing more research 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. – Rob Commented Oct 5, 2017 at 23:53
• 3 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. – user5734311 Commented Oct 6, 2017 at 0:03
• 1 @ChrisG because lack of knowledge in jQuery. – Jishnuraj Commented Oct 6, 2017 at 2:22
• 3 @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. – user5734311 Commented Oct 6, 2017 at 9:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 ment"

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 pare 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>

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