Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

how i can change the CSS class on click of an element

how i can change the CSS class on click of an element

Problem

i'am trying to make the div with the class "largebox" change to classe "largebox2" when click on buttons bt1 or bt2 , i knew that i need to use javascripte but i don't knew how
This is my code


HTML
مرحبا بكم في موقع عشاق تشلسي العرب


CSS
.largebox2
{
background-color:#FFF;
width:100%;
height:25%;
position:absolute;
top:5%;
left:0;
box-shadow:0px 0px 19px #00FF33;
z-index:1;
}
.largebox
{ 
background-color:#FFF;
width:100%;
height:25%;
position:absolute;
top:35%;
left:0;
box-shadow:0px 0px 19px #FF0000;
z-index:1;

} 
Problem courtesy of: Amir Saadallah

Solution

var elems = document.getElementsByClassName('largebox');
for(var i=0; elem = elems[i++];)
  elems.addEventListener('click', (function(){
    this.setAttribute('class', 'largebox2');
  }).bind(elem));

This effectively considers all elements with the class name 'largebox'. Iterates through them, and to each adds an event listener that will fire when clicked. The fired function will change the class then to 'largebox2' as you wished.

Solution courtesy of: Hunter Larco

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

how i can change the CSS class on click of an element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×