Stiilide muutmine CSS-klasside abil JavaScriptis

Eelmises tunnis õppisime muutma elementide CSS-stiile atribuudi style muutmise kaudu. Enamasti pole see väga hea mõte. Asi on selles, et kui CSS-stiilid laiali jagada JavaScripti koodis, on edaspidi problemaatiline veebisaidi disaini muuta, kuna tuleb otsida JavaScripti koodist sinna sisse kirjutatud stiile.

Mugavam on edasiseks toetamiseks lisada või eemaldada elemendilt CSS-klasse, muutes neid seeläbi soovitud viisil stiiliks.

Vaatame näidet. Olgu meil mõni lõik:

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

Teeme nii, et mis tahes lõigu peale klõpsates värvitakse see lõik mingisse värvi, näiteks roheliseks. Selleks teeme CSS faili spetsiaalse klassi lõikude värvimiseks:

css.colored {
  color: green;
}

Klassi kasutamise eelis on selles, et nüüd on lihtne soovitud värvi muuta - selleks tuleb lihtsalt teha muudatus CSS-failis, ilma et peaks JavaScripti koodi sisse puutuma. Eriti mugav on see juhul, kui JavaScripti koodi kirjutate teie, ja edaspidi stiilida seda keegi teine (võib-olla vähem kvalifitseeritud isik, kes oskab töötada ainult CSS-iga).

Nii, nüüd, peale klassi kasutuselevõttu, klõpsates mis tahes lõigul saab muuta selle värvi, lihtsalt lisades sellele meie klassi:

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

for (let elem of elems) {
  elem.addEventListener('click', function() {
    this.classList.add('colored'); // lisame lõigule klassi
  });
}