Onclick Change the Class Style Value without changing Class name

I need to change a value of a Class Style Property Color from RED to GREEN on click.

<style>
.c1
{
color : RED;
}

</style>

<a id="a1" class="c1" onclick="changeclassstyle()">
Hi
</a>

<script>
function changeclassstyle()
{
/* here i need to change the style of class c1 */
}
</script>

I need to change the color of c1 class to GREEN.

Note: I dont want it to be done with “ID” & I dont want to create new Class and change the class name. I want it to happen with same class name.

Answer

function changeclassstyle() {
  var c = document.getElementsByClassName("c1");
  for (var i=0; i<c.length; i++) {
    c[i].style.color = "green";
  }
}

.c1 {
  color : RED;
}

<a id="a1" class="c1" onclick="changeclassstyle()">
Hi
</a>

Advertisement

Answer