Stilering met CSS-klasse in JavaScript

In die vorige les het ons geleer hoe om CSS-style van elemente te verander deur die style-kenmerk aan te pas. Meestal is dit nie 'n goeie idee nie. Die ding is dat, as CSS-style versprei word deur die JavaScript-kode, sal dit later problematies wees om die webwerf se ontwerp te verander, aangesien jy dan in die JavaScript-kode sal moet rondsoek vir die style wat daar ingesluit is.

Vir verdere onderhoud sal dit meer gerieflik wees om CSS-klasse by die element by te voeg of te verwyder, en sodoende hulle op die nodige manier te styl.

Kom ons kyk na 'n voorbeeld. Laat ons aannem dat ons 'n paar paragrawe het:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Kom ons sorg dat, wanneer op enige paragraaf geklik word, daardie paragraaf in 'n sekere kleur gekleur word, byvoorbeeld, groen. Om dit te doen, laat ons in die CSS lêer 'n spesiale klas skep om paragrawe te kleur:

.colored {
	color: green;
}

Die voordeel van die gebruik van 'n klas is dat dit nou maklik sal wees om die verlangde kleur te verander - hiervoor sal jy net 'n verandering in die CSS-lêer moet aanbring, sonder om die JavaScript kode te moet rondsoek. Dit sal veral gerieflik wees in die geval waar jy die JavaScript-kode skryf, en iemand anders later dit sal moet styl (miskien 'n minder bekwame persoon wat net met CSS kan werk).

So, nou, na die instelling van die klas, kan 'n klik op enige paragraaf sy kleur verander, deur eenvoudig ons klas daaraan toe te voeg:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // voeg die klas by die paragraaf
	});
}

Verduidelik waarom ek die woord colored gekies het vir die naam van die klas, en nie die woord green nie, wat duidelik dui op die kleur wat ons verlang.

Gegee 'n paragraaf. Gegee knoppies 'deurhaal', 'maak vet', 'maak rooi'. Laat, wanneer op elke knoppie gedruk word, die gegewe aksie met die paragraaf gebeur (word rooi, byvoorbeeld).