Dynamiczna zmiana stylów (pojedynczy atrybut)

Wpisany przez Patryk yarpo Jar

wtorek, 22 września 2009 17:36

Coraz większa popularnością na stronach www cieszą się rozwiązania pozwalające zmieniać jeden atrybut CSS, np. powiększanie samego tekstu na stronach informacyjnych. Zobaczmy, jak można to zrobić.

 <a href="javascript:void(powieksz_tekst())">Większy tekst</a>

A teraz kod funkcji:

 function powieksz_tekst() {

    var e = document.getElementsByTagName("p");

    for (i=0; i<e.length; i++) {

        e[i].style.fontSize = "1.2em";

    }

}

Aha, oczywiście kod, owego napisu musi wyglądać podobnie do tego:

 <p id="napis" class="stara">Lorem ipsum dolor sit amet, consectetuer adipiscing elit(...)</p>

I załóżmy, że oto kod CSS:

 p {

    font-size: 0.8em;

}

Oczywiście równie dobrze, można przekazywać jako parametr nowy rozmiar tekstu, lub zrobić powiększanie/pomniejszanie wielokrotne poprzez odpowiednie z sparametryzowanie funkcji oraz zamianę '=' na '+=' [czyli operator dopisania]. Ale niech już to będzie zadanie domowe dla chętnych.

Tags:

< Poprzednia		Następna >