e-gradiva     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Oblikovanje pisave

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:

Barva pisave

Velikost pisave

Č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