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

Barva ozadja odstavka

getElementsByTagName

Koda: 
<p>aaa</p>
<pre class="ww">bbb</pre>
<p>ccc</p>
<p class="ww">ddd</p>
</div>

<script type="text/javascript">
function gremo()
{
odstavki=document.getElementsByTagName("p").length
for (i=0;i<odstavki;i++)
  {
  alert(document.getElementsByTagName("p")[i].firstChild.nodeValue)
  document.getElementsByTagName("p")[i].style.backgroundColor="#B22222"
  document.getElementsByTagName("p")[i].style.color="white"
  }
}
</script>
Izgled v
brskalniku:

Ogled v novem oknu

Razlaga:

Ob kliku na Ogled v novem oknu, se nam odpre novo okno s štirimi odstavki. Po pritisku na gremo, se izvede funkcija.

Funkcija vsebuje zanko for in na monitorju se pojavijo sporočila, ki po potrditvi spremenijo barvo ozadja odstavka, elementom p v "#B2222". Elemente p se v dokumentu poišče s postopkom getElementsByTagName("p"). Barva ozadja se ne spremeni bloku pre.

Ozadje se spremeni kot lastnost slogovne predloge generičnega elementa style. Ker JavaScript ne podpira vezajev v imenih lastnosti, je predpisano, da se lastnost CSS background-color spremeni v lastnost JavaScript backgroundColor.

gor Gor     e-gradiva     JavaScript     Primeri     Slogovne predloge

SERŠ Maribor : Strokovna gimnazija : 2004 : Vitjan Muršec