W3-SI.com     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Sprememba ozadja

Koda: 
<script type="text/javascript">
function ozadje(barva)
{
document.getElementById("telo").style.backgroundColor=barva
}
</script>

<form action="akcija.html">
<p><input class="gumb" type="button"
onclick="ozadje(this.style.backgroundColor)"
style="background-color:red"></p>
<p><input class="gumb" type="button"
onclick="ozadje(this.style.backgroundColor)"
style="background-color:blue"></p>
<p><input class="gumb" type="button"
onclick="ozadje(this.style.backgroundColor)"
style="background-color:green"></p>
</form>

<style>
body
{
background-repeat:repeat-y
}
.gumb
{
height:50px;
width:100px;
border: 3px solid silver;
}
</style>

<body id="telo">
Izgled v
brskalniku:

Izberi ozadje
Razlaga:

Zgoraj je napisana enostev skript, ki nam omogoča spreminjanje barve ozadja.

To deluje tako, da imamo ustvarjene 3 gumbe, vsak ima določen svoj style, v katerm je definirana njegova barva (style="background-color:red").

Ko kliknemo na posamezen gumb se pokliče funkcija ozadje(barva), ki ima določen parameter barva, ki ob kliku dobi vrednost style tega gumba (onclick="ozadje(this.style.backgroundColor)" – ozadje(this.style.backgroundColor) = ozadje(barva) – (this.style.backgroundColor) = (barva)).

V tej funkciji je zapisano, da dobi dobi element, ki ima id telo, v našem primeru je to body (body id="telo") določeno barvo ozadja (document.getElementById("telo").style.backgroundColor=barva), v tem primeru torej vrednost barva, ki pa je enaka barvi posameznih gumbov.

Tako se barva ozadja spreminja ko kliknemo na posamezen gumb, spremeni se pa v isto barvo kot je gumb.

gor Gor     W3-SI     JavaScript     Primeri     Slogovne predloge

SERŠ Maribor : Strokovna gimnazija : 2004 : Davorin Lenart