Dynamiczna zmiana stylów (pojedyncza klasa)

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2008-02-21

szukaj: dynamiczna zmiana klasy CSS zmiana stylu CSS JS JavaScript

Porada ta jest niejako rozwinięciem porady o zmianie pojedynczego atrybutu

Gdy chcesz zmienić całkowicie wygląd jakiegoś elementu na stronie, np. zwiększyć napis, zmienić jego kolor i tło, a także obramowanie, mógłbyś korzystając z DOM pozmieniać wszystko pojedynczo, uzyskując żądany efekt.

Po co jednak się wysilać, skoro można to uzyskać dużo łatwiej i przyjemniej (a także profesjonalniej), zmieniając całą klasę!

Oto kod:

<a href="javascript:void(zmien_klase_CSS('nowa', 'napis'))">Zmień klasę</a>

A teraz kod funkcji:

function zmien_klase_CSS(nazwa_nowej_klasy, element) {
	var el = document.getElementById(element);
	el.className = nazwa_nowej_klasy;
}

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:

.stara {
	font: normal 1em arial, sans-serif;
}

.nowa {
	font: bold 2em verdana, sans-serif;
}

I wszystko powinno działać jak należy.

Warto przeczytać również:

Patryk 'yarpo' Jar

szukaj: dynamiczna zmiana klasy 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!