CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

CSS ja JavaScript & VbScript

Tyylin dynaaminen hallinta DOM:n style-kokoelman avulla

JavaScriptin (tai VBScriptin) avulla mitä tahansa HTML /XHTML-dokumentin elementtiä, ja siihen liittyviä CSS-ominaisuuksia voidaan hallita DOM-mallin kautta. JavaScriptin kautta tapahtuva hallinta perustuu hyvin pitkälti kahteen menetelmään, getElementById ja getElementsByTagName, joiden kautta voidaan aksessoida nk. style-kokoelmaa. Menetelmien syntaksi on:

document.getElementById("elementtiID").style.ominaisuus="arvo";
document.getElementByTagName("elementti").[indeksi].style.ominaisuus="arvo";;

Yllä olevassa listauksessa:

elementtiID on HTML / XHTML -elementille määritelty ID-attribuutin arvo
ominaisuus on CSS-ominaisuutta vastaava ominaisuus
arvo on CSS-ominaisuudelle annettava arvo
indeksi määrittää elementin järjestysnumeron dokumentissa (esim. 2. kappale).

Koodi, jolla halutaan aksoissoida style-kokoelmaa tulee sijoittaa dokumentin loppuun juuri ennen body-elementin lopetusta. Jos koodi sijoitetaan normaaliin tapaan dokumentin ylätunnisteeseen, ei se toimi odotetulla tavalla koska käsiteltäviä elementtejä ei ole vielä parsittu ja ladattu muistiin.

Esimerkiksi jos haluamme piilottaa kaikki kappale-elementit (<p>) hiiren napsautuksella, tapahtuisi se seuraavalla koodilla:

...
<ul>
<li onclick="muutaNakyvyys('p','none');">Piilota kappale-elementit</li>
<li onclick="muutaNakyvyys('p','block');">Näytä kappale elementit</li>
</ul>

...

<script type="text/javascript">
/*  sijoita sivun loppuun */

function muutaNakyvyys(sElementti,sNakyvyys) {
  if (document.getElementsByTagName) {
    x = document.getElementsByTagName(sElementti);
  }
  else if (document.all) {
    x = document.all.tags(sElementti);
  }
  else{
	// selain ei tue menetelmää
  }
	
  for(var i=0;i<x.length;i++){
     x[i].style.display = sNakyvyys;
  }
}

</script>

<body>

Erittäin yleisesti CSS:n ominaisuuksien dynaamista hallintaa käytetään kun halutaan reagoida käyttäjän toimintoihin esim. näyttämällä tai piilottamalla jokin määrätty sisältö. Alla muutamia yleisimmin käytettyjä sovellutuksia:

kun käyttäjä liikuttaa hiirtään menu-elementin päällä, näytetään vieressä lyhyt kuvaus tms. informaatio
kun käyttäjä täyttää lomaketta, näytetään hänelle kenttää koskeva ohje
kun käyttäjä täyttää lomaketta, korostetaan aktiivinen kenttä (saman voi tehdä myös :active pseudoluokan avulla, mutta sen toimivuus kaikilla selaimilla on vielä erittäin heikkoa)
tekstin koon muokkaaminen isommaksi / pienemmäksi

Tutustu artikkelin muihin osiin:
»»» CSS »»»CSS ja JavaScript: selaimen tunnistus
»»» CSS »»»CSS ja JavaScript: Tyylin dynaaminen hallinta DOM:n style-kokoelman avulla
»»» CSS »»»CSS ja dHTML / AJAX-koodin tehokkaampi hallinta

CSS-opas

CSS ja JavaScript & VbScript

Tyylin dynaaminen hallinta DOM:n style-kokoelman avulla

Tallenna tämä sivu kirjanmerkkeihin!