Dynamiczna zmiana stylów (pojedyńczy atrybut)

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-09-11

szukaj: dynamiczna zmiana atrybutu CSS zmiana stylu CSS JS JavaScript

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ć.

Oto kod:

<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.

Warto przeczytać również:

Patryk 'yarpo' Jar

szukaj: dynamiczna zmiana atrybutu CSS zmiana stylu CSS JS JavaScript

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!