JavaScript i CSS saradnja

Java Script i CSS

 

Kako upravljati inline CSS-om?

CSS koji je potrebno izmeniti nakon ucitavanja stranice i koji nije moguce jednostavno izmeniti izmenom u samom HTML-u, koristi sluzbenu rec style i ime atributa koji se menja. Ako pogledamo primer:

<p style=”color:red;background-color:white;font-size:14px;font-family:Arial;”

>Neka recenica…</p>

videcemo da nismo ucili nacin kako da unutar style atributa citamo, menjamo ili brisemo odredjene CSS stilove.

Sintaksa se ne razlikuje mnogo. Kao i u prethodnim primerima dodjemo do pointera elementa i stil menjamo na sledeci nacin:

element_koji_se_menja.style.css_svojstvo=’nova_vrednost’;

U nasem primeru zelimo da promenimo parametar color, i pozadinsku boju paragrafa. To izvodimo sledecim kodom:

p.style.color=”white”;

p.style.backgroundColor=”blue”;

 

Ovde primecujemo jednu nedoslednost. Ona se definise kao:

ukoliko CSS atribut ima srednju crtu u svom nazivu ona se izbacuje a rec posle nje pise velikim slovom.

U nasem primeru vidimo da se background-color menja u backgroundColor. Slicno bi uradili i sa font-size koje bi preslo u fontSize i font-family u fontFamily. Razlog za ovo je sto u Java Scriptu, srednja crta oznacava aritmeticku operaciju pa bi doslo do pogresnog tumacenja koda.

 

Jos jedna stvar. Ukoliko Java Scriptom zelimo da postavimo klasu nekom elementu, sintaksa za to ce biti:

document.getElementById(‘neki_id’).className=’ime_nove_klase’;

 

Ovde cemo samo naglasiti da ovaj kod mora stajati unutar koda koji govori da se njegovo izvrsavanje odlaze do god kompletan html dokument nije ucitan u prozor pretrazivaca.

window.onload(){

document.getElementById(‘neki_id’).className=’ime_nove_klase’;

 

Sada cemo pogledati jedan primer u kome cemo, ukoliko korisnik klikne negde unutar div-a sa tekstom, div menjati CSS svojstva.

<!DOCTYPE html>

<head>

<title>Izmena klase nad elementom putem Java Scripta</title>

</head>

 

<style>

.crvena{color:red;background-color:grey;}

</style>

<body>

<div id=”izmena”>

<h1>Naslov strane</h1>

<p>Nakon sto korisnik klikne unutar diva sa id-jem izmena, boja teksta paragrafa i naslova koji se nalaze unutar njega bice izmenjena u crvenu. Sledeci put kada korisnik klikne, CSS klasa ce biti uklonjena, tj. tekst ce dobiti default crnu boju</p>

</div>

 

<script>

window.onload = function(){

document.getElementById(‘izmena’).onclick = function(){

               if(document.getElementById(‘izmena’).className ==’crvena’){

                              document.getElementById(‘izmena’).className =”;

               }else{

                              document.getElementById(‘izmena’).className =’crvena';

               }

};

}

</script>

 

</body>

</html>

 

 

Kako promeniti CSS inline?

U prethodnom primeru menjali smo CSS svojstva koja su definisana ili kao interna a mogu biti primenjena I za slucaj da je CSS definisan u eksternom fajlu. Sada cemo pogledati primer kako da menjamo CSS svojstva kada su napisana inline, na primer:

<p style=’color:blue;background-color:red;’>Ovde menjamo boju teksta I pozadine stila koji je definisan inline.</p>

Celokupan kod izgledace:

<!DOCTYPE html>

<head>

<title>Izmena klase nad elementom putem Java Scripta</title>

</head>

<body>

<p id=”paragraf” style=’color:white;background-color:blue;’>Ovde menjamo boju teksta I pozadine stila koji je definisan inline.</p>

 

<script>

window.onload = function(){

var paragraf_za_izmenu=document.getElementById(‘paragraf’);

paragraf_za_izmenu.onclick = function(){

document.getElementById(‘paragraf’).style.backgroundColor = “grey”;

document.getElementById(‘paragraf’).style.color = “red”;

};

}

</script>

 

</body>

</html>

 

 

 

Sve zajedno ili “Putting it all together!”

Sada cemo, pomocu onoga sto smo do sada naucili pokusati da kreiramo box koji se nakon ucitavanja stranice krece sa leve strane ekrana na desnu I u momentu kada se pomeri za neku vrednost – stane.

Kompletan kod izgleda ovako:

<!DOCTYPE html>

<head>

<title>Izmena klase nad elementom putem Java Scripta</title>

</head>

<style>

div#setnja{background-color:grey;color:white;width:250px;height:200px;font-size:12px;}

</style>

<body>

<div id=”setnja”>

<h1>Naslov ce takodje ici levo</h1>

<p>Ovo ce se kretati ulevo za 200px u roku od 5 sekundi i onda stati.</p>

</div>

<script>

var trenutna_pozicija=0;

window.onload = function(){

 

document.getElementById(‘setnja’).style.position=”absolute”;

document.getElementById(‘setnja’).style.left=”50px”;

document.getElementById(‘setnja’).style.top=”50px”;

 

function animacija(){

if(trenutna_pozicija<900){

trenutna_pozicija +=50;

document.getElementById(‘setnja’).style.left = trenutna_pozicija+”px”;

}else{

clearInterval(setanje);

}

}

var setanje= setInterval(animacija,50);

}

</script>

</body>

</html>

 

Sada cemo pojasniti elemente koji se ticu Java Scripta.

Prvi red postavlja promenljivu trenutna_pozicija na vrednost 0 kako bi je bez problema kasnije pozivali u programu.

var trenutna_pozicija=0;

 

U okviru window.onload dogadjaja sprecicemo izvrsavanje koda pre nego se svi elementi html strane ucitaju.

window.onload = function(){

}

 

U naredna tri reda putem Java Script-a postavljamo pocetnu poziciju div-a. Ovo ne moramo da radimo, ali cisto zbog vezbe J

document.getElementById(‘setnja’).style.position=”absolute”;

document.getElementById(‘setnja’).style.left=”50px”;

document.getElementById(‘setnja’).style.top=”50px”;

 

Pre nego objasnimo funkciju animacija, komentarisacemo red

var setanje= setInterval(animacija,50);

 

setInterval funkcija ce pozivati funkciju animacija svakih 50 milisekundi. Smestamo je u promenljivu setanje da bi mogli da ispitamo da li je dostignuta odredjena vrednost pomeranja kako bi mogli da je zaustavimo komandom clearInterval. U slucaju da to ne uradimo, box bi se pomerao beskonacno, izasao van ekrana I nikada se izvrsavanje ne bi zaustavilo. A ono sto mi zelimo je da se box pomeri za 900px I onda stane.

 

Sada mozemo da pojasnimo sta radi funkcija animacija. If iskaz ispituje svaki put da li je trenutna_pozicija veca od 900px, tj. ovaj iskaz nam upravo omogucava da u jednom trenutku izvrsavanje prekinemo.

 

Pri svakom pozivanju funkcije animate povecava vrednost atributa left I na taj nacin animira kretanje box-a. Ovo se desava u dva reda definisana kao:

trenutna_pozicija +=50;

document.getElementById(‘setnja’).style.left = trenutna_pozicija+”px”;

 

Na kraju, ukoliko trenutna_pozicija ima vrednost od 900px, zaustavi box. To postizemo redom:

 

clearInterval(setanje);

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn