Zamenjava slogovnih predlog

Koda:

Koda:	<script type="text/javascript"> function stil(kateri) { document.getElementById('novi_slog').href= kateri + ".css" } </script> <link rel="stylesheet" type="text/css" href="../../stil4.css" id="novi_slog" /> <p>Zamenjaj stil:</p> <ul> <li onclick='stil("slog1")'>vrednost1</li> <li onclick='stil("slog2")'>vrednost2</li> <li onclick='stil("slog3")'>tretji</li> <li onclick='stil("slog4")'>Četrti</li> <li onclick='stil("slog5")'>peti</li> <li onclick='stil("slog0")'>Šesti</li> </ul>
Izgled v brskalniku:	Zamenjaj stil: vrednost1 vrednost2 tretji četrti peti šesti
Razlaga:	Zgoraj je napisana funkcija, ki je služi za menjavo slogovnih predlog, pod njo pa je napisana ustrezna koda HTML . Pod kodo HTML je napisan delujoč primer, s pomočjo katerega lahko vidite učinek funkcije `stil()` in ustrezne kode HTML. Najprej si je dobro pogledati kodo HTML. Iz kode je razvidno, da se vedno, kadar kliknete na enega od elementov seznama kliče ista funkcija, vendar se funkciji v vsakem primeru pošlje druga vrednost. V teh primerih so vrednosti, ki se pošljejo, števila od ena do šest, vendar se ta števila ne pošljejo kot vrednosti tipa `number` ampak kot vrednosti tipa `string`. Funkcija se kliče vedno kadar kliknete na enega od elementov, torej na dogodek `onclick`, ta dogodek bi lahko v tem primeru zamenjali tudi s katerim koli vrednost2m združljivim dogodkom. Funkcija prejme poslano vrednost, vrednost se shrani v spremenljivko z imenom `stevilo`. Po prejetju vrednosti, funkcija znotraj dokumenta HTML poišče element z id `mojstil`, v tem primeru je to element `link`. Temu predmetu vstavi v atribut `href` novo vrednost. Atribut `href` vsebuje pot do datoteke s slogovnimi predlogami, iz tega je razvidno, da je predloga, ki se uporabi neposredno odvisna od vrednosti, ki se pošlje funkciji.

<script type="text/javascript">
function stil(kateri)
{
document.getElementById('novi_slog').href= kateri  + ".css"
}
</script>

<link rel="stylesheet" type="text/css" href="../../stil4.css" id="novi_slog" />


<p>Zamenjaj stil:</p>

<ul>
   <li onclick='stil("slog1")'>vrednost1</li>
   <li onclick='stil("slog2")'>vrednost2</li>
   <li onclick='stil("slog3")'>tretji</li>
   <li onclick='stil("slog4")'>Četrti</li>
   <li onclick='stil("slog5")'>peti</li>
   <li onclick='stil("slog0")'>Šesti</li>
</ul>

Izgled v
brskalniku:

Zamenjaj stil:

vrednost1
vrednost2
tretji
četrti
peti
šesti

Razlaga:

Zgoraj je napisana funkcija, ki je služi za menjavo slogovnih predlog, pod njo pa je napisana ustrezna koda HTML . Pod kodo HTML je napisan delujoč primer, s pomočjo katerega lahko vidite učinek funkcije stil() in ustrezne kode HTML.

Najprej si je dobro pogledati kodo HTML. Iz kode je razvidno, da se vedno, kadar kliknete na enega od elementov seznama kliče ista funkcija, vendar se funkciji v vsakem primeru pošlje druga vrednost. V teh primerih so vrednosti, ki se pošljejo, števila od ena do šest, vendar se ta števila ne pošljejo kot vrednosti tipa number ampak kot vrednosti tipa string. Funkcija se kliče vedno kadar kliknete na enega od elementov, torej na dogodek onclick, ta dogodek bi lahko v tem primeru zamenjali tudi s katerim koli vrednost2m združljivim dogodkom.

Funkcija prejme poslano vrednost, vrednost se shrani v spremenljivko z imenom stevilo. Po prejetju vrednosti, funkcija znotraj dokumenta HTML poišče element z id mojstil, v tem primeru je to element link. Temu predmetu vstavi v atribut href novo vrednost.

Atribut href vsebuje pot do datoteke s slogovnimi predlogami, iz tega je razvidno, da je predloga, ki se uporabi neposredno odvisna od vrednosti, ki se pošlje funkciji.

Gor e-gradiva JavaScript Primeri

SERŠ Maribor : Strokovna gimnazija : 2004 : Danijel Mom

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri