Postoji više načina za manipulaciju css vrednostima. Ako govorimo o dinamičkoj manipulaciji onda je javascript prvi programski jezik koji mi pada na pamet. Naravno ne i jedini.

Verovatno ste nekada želeli da posetilac može da utiče na sadržaj, oblik divova isl. u realnom vremenu? Bilo njegovom željom, bilo vašom?
PHP traži zahtev ka serveru, ujedno je i osveženje stranice neminovno. A šta kažete onda za JS? Javascript može da utiče na stil diva preko document.getElementById(id) metode i da menja vrednosti tog diva u zavisnosti od potrebe. Naravno, može i više divova odjednom ili cele stranice.

U ovom tutorijalu ćemo napraviti jedan mali div kojim ćemo manipulisati onclick i hover efektom.

1. Korak

Za početak ćemo napraviti html5 stranicu index.html. Unutar diva kojim ćemo manipulisati ide malo Lorem Ipsuma-a.

 
 
 
 
 
 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 
 
 
 
 
 

2. Korak

Da bi ova stranica ličila na nešto treba nam malo css-a.

Upotrebili smo malo css3 vrednosti koje IE9 neće svariti kako bi trebalo ali to Mikro$oftu o glavu.

3. Korak

Sada dolazi malo magije.

Javascript  čuva vrednosti u nizu i menja boju pozadine u zavisnosti od potrebe. Niz može biti onoliko veliki koliko je nama potrebno. Preko getElementById metode pristupamo odgovarajućem divu i menjamo vrednosti koje želimo.

4. Korak

Ostaje još da "vežemo оkidače".

 
 
 
 
......
Promeni
 
Promeni
......

I to bi bilo to. Gornji red divova menja boju centralnog na hover a donji na klik. Pored ovog dela koda može se dodati i cookies koji će pamtiti  šta je izabrano.
Naravno, ovaj kod se može upotrebiti i za druge stvari. Umesto boje, može se menjati i background image. Dovoljno je zamenite vrednosti boja u nizu sa putanjom do slike i linija koda u js document.getElementById("test_div").style.background= pozadina[boja].