CODEWITHSUNDEEP
javascripthtmlcss
logan
logan

Reputation: 8346

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.

Upvotes: 0

Views: 5237

Answers (5)

trytry
trytry

Reputation: 1

https://developer.mozilla.org/es/docs/Web/CSS/:active

seudoclass :active

.class-label {  
    display: flex;
    width: 100px;
    height: 60px;
    background-color:rgb(201, 201, 201) ; 
    padding: 10px;
    box-sizing: border-box;
    margin: 10px;
    border: 1px solid;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    font-family: monospace;  
}

.class-label:active {
    background-color: salmon;
    color: white;
}

Upvotes: 0

Ceeelayearrkay
Ceeelayearrkay

Reputation: 36

if you don't want to add javascript to the tag itself you can do it this way:

var c= document.getElementsByClassName("someClass");


       for (var i = 0; i < c.length; i++)  {
            c[i].onclick=function(){       //on click here instead of on tag

                this.style.color="green";
            }
        }

Upvotes: 0

davidtrautmann
davidtrautmann

Reputation: 54

jQuery version

function changeToGreen(elem) {
  $("." + elem.className).css("color", "green");
}
.c1 {
  color: RED;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a id="a1" class="c1" onclick="changeToGreen(this)">
Hi
</a>
<br/>
<p class="c1">
  Test
</p>

Upvotes: 0

Agus Putra Dana
Agus Putra Dana

Reputation: 719

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>

Upvotes: 3

sinisake
sinisake

Reputation: 11328

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


<script>

function changeclassstyle(obj)
{
obj.style.color='green';
}
</script>

Upvotes: 0

Related Questions