webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> porady >> javascript

Dynamiczna zmiana stylów (pojedyńczy atrybut)

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

szukaj: dynamiczna zmiana atrybutu CSS dynamiczna zmiana atrybutu CSS zmiana stylu CSS zmiana stylu CSS JS JS JavaScript 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

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

Chcesz zaoszczędzić czas i pieniądze?
Projektowanie stron.
Zobacz nasze realizacje!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org