: Home / JavaScript / artykuły / Dynamiczna zmiana stylów (pojedynczy atrybut)
Dynamiczna zmiana stylów (pojedynczy atrybut)
Ocena użytkowników: / 0
SłabyŚwietny 
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 >
 

Dodaj komentarz


Kod antysapmowy
Odśwież