JavaScript i CSS?

[ Nikola Poša @ 01.09.2012. 20:39 ] @

Čini mi se da imaš malo pogrešan pristup, i ne treba na stvari da gledaš na takav način...

PHP, kao server-side jezik, omogućava da se stranice sajta serviraju na dinamičniji način, pri čemu je rezultat onoga što PHP vrati upravo neki HTML kôd, baš kao i u slučaju nekog sajta sa statičkim stranicama. To što će ta stranica u sebi imati određene tagove i markup kojim se učitava neki JS ili CSS kôd, je nešto što se PHP-a ne tiče niti ga zanima, niti s tim može da bude u nekakvom direktnom kontaktu.

E sad, što se tiče dešavanja na klijentskoj strani, tu stvari treba da posmatraš tako da je u toj priči JS najnapredniji jezik i onaj koji omogućava sve te neke "magične" efekte, tako što može da manipuliše HTML-om i elementima na stranici, pa samim tim i CSS definicijama nakačenim na te elemente.
Postoji standrad po nazivu DOM (Document Object Model), definisan od strane W3C-a, koji najprostije rečeno predstavlja programski interfejs za HTML/XML dokumente. Razlog zbog kojeg sam pomenuo DOM je to što JS bez njega ne bi bio ono što jeste, u smislu da ne bi posedovao API za manipulaciju HTML stranica. Svaki element u okviru stranice - sam dokument, head sekcija, body, neka slika, tabela, input polje, itd., kroz DOM biva predstavljen kao odgovarajući objekat, preko čega je moguć pristup i manipulacija svim njegovim svojstvima.
A kako ta priča sa JS-om i DOM-om izgleda u praksi, pa najbolje je da polako kreneš sa upoznavanjem tih stvari ovde: http://www.w3schools.com/jsref/default.asp, ili još bolje sa proučavanjem konkretnih primera: http://www.w3schools.com/js/js_ex_dom.asp. Takođe, ovde imaš listing i dokumentaciju svih dostupnih metoda u okviru DOM modela.

Što se konkretnog rešenja tog tvog pitanja tiče, možda ovako nešto:

Code:
var headerTitle = document.getElementById('headerTitle');
var initialColor = headerTitle.style.backgroundColor;
var newColor = '#FFF000';

var t = setTimeout(function() {
    if (headerTitle.style.backgroundColor === initialColor) {
        headerTitle.style.backgroundColor = newColor;
    } else {
        headerTitle.style.backgroundColor = initialColor;
    }

    t = setTimeout(arguments.callee, 5000);
}, 5000);