| e-gradiva | HTML | CSS | JavaScript | Načrtovanje | |||||
![]() |
|||||||||
| SERŠ Maribor | Iskanje | Primeri | |||||||
| Koda: |
<script type="text/javascript">
function menjaj1(a)
{
//seznam barv za izpis (v slovenskem jeziku)
var barvas=new Array("\u010Drna","Modra","Rde\u010Da", "Zelena","Oran\u017Ena","Rumena")
//seznam barv za spreminjanje sloga CSS (v angleškem jeziku)
var barva=new Array("black","blue","red","green", "orange","yellow");
document.getElementById("tekst").style.color=barva[a]
document.getElementById("barva_txt").firstChild.nodeValue=barvas[a]
}
function menjaj2(b)
{
//velikosti pisav
var veli=new Array("10pt","15pt","20pt","25pt","30pt");
document.getElementById("tekst").style.fontSize=veli[b]
document.getElementById("velik").firstChild.nodeValue=veli[b]
}
</script>
<form id="izbira">
<h3>Barva pisave</h3>
<select id="barve" onchange="menjaj1(this.selectedIndex)">
<option selected="selected">Črna</option>
<option>Modra</option>
<option>Rdeča</option>
<option>Zelena</option>
<option>Oranžna</option>
<option>Rumena</option>
</select>
<h3>Velikost pisave</h3>
<select id="velikost" onchange="menjaj2(this.selectedIndex)">
<option selected="selected">Zelo majhna</option>
<option>Majhna</option>
<option>Srednja</option>
<option>Velika</option>
<option>Zelo velika</option>
</select>
</form>
<p id="tekst"><span id="barva_txt">Črna</span>
<span id="velik">10pt</span></p>
|
|---|---|
| Izgled v brskalniku: |
Črna 10pt |
| Razlaga: |
Velikost in barvo pisave spreminjamo z dvema spustnima menijema. Posamezne možnosti so znotraj elementa option. Po spremembi možnosti (barve ali velikosti) se kliče funkcija (zamenjaj1 oz. zamenjaj2). Funkcijama se pošlje parameter o izbrani možnosti. S stavkom document.getElementById("tekst").style.color=barva[a] JavaScript spremeni barvo pisave. S stavkom document.getElementById("tekst").style.fontSize=veli[b] pa se spremeni velikost pisave.
|
SERŠ Maribor : Strokovna gimnazija : 2004 : Gregor Jelen