Summary  
This chapter explains how to dynamically modify element styles in JavaScript using the style property for inline CSS and the classList API for adding, removing, toggling, and replacing CSS classes.

General domain of usage  
Theme switching in web applications

Verkkokehityksessä elementtien tyylejä täytyy usein muokata dynaamisesti. JavaScript tarjoaa kaksi ensisijaista tapaa muuttaa elementtien ulkoasua: päivittämällä sisäisiä tyylejä `style`-ominaisuuden avulla sekä hallitsemalla luokkia `classList`-ominaisuudella.

## Sisäisten tyylien muuttaminen style-ominaisuudella
JavaScriptin `style`-ominaisuuden avulla voidaan muokata HTML-elementin sisäistä CSS-tyyliä suoraan. Tämä menetelmä antaa täyden hallinnan yksittäisiin CSS-ominaisuuksiin, mutta rajoittuu vain sisäisiin tyyleihin ja vaikuttaa ainoastaan kyseiseen elementtiin.

Yksittäisiä CSS-ominaisuuksia voidaan muuttaa pisteoperaattorilla elementin style-objektissa. Ominaisuuksien nimet kirjoitetaan camelCase-muodossa (esim. `backgroundColor` eikä `background-color`).

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgaWQ9ImJveCI+PC9kaXY+CiAgICAgIDxidXR0b24gaWQ9ImNoYW5nZS1zdHlsZSI+Q2hhbmdlIFN0eWxlPC9idXR0b24+CiAgICA8L2Rpdj4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

LmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4Owp9CgojYm94IHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICBib3gtc2hhZG93OiAycHggMnB4IDEwcHggcmdiYSgwLCAwLCAwLCAwLjIpOwogIHRyYW5zaXRpb246IGFsbCAwLjVzIGVhc2U7Cn0KCmJ1dHRvbiB7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwMDhjYmE7CiAgY29sb3I6IHdoaXRlOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDVmNmI7Cn0=

Y29uc3QgYm94ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2JveCcpOwpjb25zdCBjaGFuZ2VTdHlsZUJ1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjaGFuZ2Utc3R5bGUnKTsKCi8vIEV2ZW50IGxpc3RlbmVyIHRvIGNoYW5nZSB0aGUgc3R5bGUKY2hhbmdlU3R5bGVCdXR0b24uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7CiAgYm94LnN0eWxlLmJhY2tncm91bmRDb2xvciA9ICdjb3JhbCc7IC8vIENoYW5nZSBiYWNrZ3JvdW5kIGNvbG9yCiAgYm94LnN0eWxlLndpZHRoID0gJzIwMHB4JzsgLy8gQ2hhbmdlIHdpZHRoCiAgYm94LnN0eWxlLmJvcmRlciA9ICcycHggc29saWQgYmxhY2snOyAvLyBBZGQgYSBib3JkZXIKfSk7

`style`-ominaisuutta käytetään muokkaamaan `#box`-elementin sisäisiä tyylejä. Jokainen CSS-ominaisuus on käytettävissä yksittäisenä JavaScript-ominaisuutena (esim. `box.style.backgroundColor`), mikä mahdollistaa tiettyjen tyylin osa-alueiden dynaamisen muuttamisen.

## CSS-luokkien lisääminen ja poistaminen classList-ominaisuudella
`classList`-ominaisuus tarjoaa joustavamman ja tehokkaamman tavan hallita elementin tyylejä lisäämällä, poistamalla tai vaihtamalla CSS-luokkia. Tämä menetelmä on helpommin ylläpidettävä kuin tyylien muokkaaminen suoraan, sillä sen avulla voit hyödyntää ulkoisia CSS-tiedostoja ja pitää tyylit erillään JavaScript-logiikasta.


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgaWQ9ImNpcmNsZSIgY2xhc3M9ImRlZmF1bHQtc3R5bGUiPjwvZGl2PgogICAgICA8YnV0dG9uIGlkPSJ0b2dnbGUtc3R5bGUiPlRvZ2dsZSBTdHlsZTwvYnV0dG9uPgogICAgPC9kaXY+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

LmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4Owp9CgouZGVmYXVsdC1zdHlsZSB7CiAgd2lkdGg6IDEyMHB4OwogIGhlaWdodDogMTIwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2E4ZTZjZjsKICBib3JkZXItcmFkaXVzOiA1MCU7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgdHJhbnNpdGlvbjogYWxsIDAuNHMgZWFzZTsKfQoKLmhpZ2hsaWdodCB7CiAgYm9yZGVyOiA2cHggc29saWQgI2ZmNmY2OTsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgYm94LXNoYWRvdzogMCA4cHggMjBweCByZ2JhKDAsIDAsIDAsIDAuMik7Cn0KCmJ1dHRvbiB7CiAgcGFkZGluZzogMTJweCAyNXB4OwogIGJhY2tncm91bmQtY29sb3I6ICM0NWEyOWU7CiAgY29sb3I6IHdoaXRlOwogIGZvbnQtc2l6ZTogMTZweDsKICBib3JkZXI6IG5vbmU7CiAgYm9yZGVyLXJhZGl1czogMjVweDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgYm94LXNoYWRvdzogMCA0cHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZSwgdHJhbnNmb3JtIDAuMnMgZWFzZTsKfQoKYnV0dG9uOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzI2YTZmOwogIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtMnB4KTsKfQoKYnV0dG9uOmFjdGl2ZSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApOwp9

Y29uc3QgY2lyY2xlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NpcmNsZScpOwpjb25zdCB0b2dnbGVTdHlsZUJ1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtc3R5bGUnKTsKCi8vIEV2ZW50IGxpc3RlbmVyIHRvIHRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCnRvZ2dsZVN0eWxlQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGNpcmNsZS5jbGFzc0xpc3QudG9nZ2xlKCdoaWdobGlnaHQnKTsgLy8gVG9nZ2xlcyB0aGUgJ2hpZ2hsaWdodCcgY2xhc3MKfSk7

`classList.toggle()`-metodia käytetään lisäämään tai poistamaan `highlight`-luokka, kun painiketta napsautetaan. Tämä menetelmä estää tyylien lisäämisen suoraan `style`-attribuuttiin ja perustuu ennalta määriteltyihin CSS-sääntöihin ylläpidettävyyden takaamiseksi.

## Käytännön esimerkki: Teeman vaihtaminen
Tarkastellaan käytännön esimerkkiä, jossa käyttäjä voi vaihtaa vaalean ja tumman teeman välillä käyttämällä `classList`-ominaisuutta.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0idGhlbWUtY29udGFpbmVyIj4KICAgICAgPHA+VGhpcyBpcyBhIHRoZW1lIHN3aXRjaGVyIGV4YW1wbGU8L3A+CiAgICAgIDxidXR0b24gaWQ9InRvZ2dsZS10aGVtZSI+U3dpdGNoIFRoZW1lPC9idXR0b24+CiAgICA8L2Rpdj4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdTZWdvZSBVSScsIFRhaG9tYSwgR2VuZXZhLCBWZXJkYW5hLCBzYW5zLXNlcmlmOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZSwgY29sb3IgMC4zcyBlYXNlOwp9CgojdGhlbWUtY29udGFpbmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjRmNGY5OwogIHBhZGRpbmc6IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogMTJweDsKICBib3gtc2hhZG93OiAwIDRweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCiN0aGVtZS1jb250YWluZXIgcCB7CiAgZm9udC1zaXplOiAxOHB4OwogIG1hcmdpbi1ib3R0b206IDE1cHg7Cn0KCiN0b2dnbGUtdGhlbWUgewogIHBhZGRpbmc6IDEwcHggMjBweDsKICBib3JkZXI6IG5vbmU7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmZmZmY7CiAgZm9udC1zaXplOiAxNnB4OwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZSwgdHJhbnNmb3JtIDAuMnMgZWFzZTsKfQoKI3RvZ2dsZS10aGVtZTpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwNTZiMzsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTJweCk7Cn0KCiN0b2dnbGUtdGhlbWU6YWN0aXZlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA0NDk0OwogIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwKTsKfQoKLmRhcmstdGhlbWUgewogIGJhY2tncm91bmQtY29sb3I6ICMxMjEyMTI7CiAgY29sb3I6ICNmNGY0Zjk7Cn0KCi5kYXJrLXRoZW1lICN0aGVtZS1jb250YWluZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMxZTFlMmY7CiAgYm94LXNoYWRvdzogMCA0cHggMTVweCByZ2JhKDAsIDAsIDAsIDAuNSk7Cn0KCi5kYXJrLXRoZW1lICN0b2dnbGUtdGhlbWUgewogIGJhY2tncm91bmQtY29sb3I6ICNmZjk4MDA7CiAgY29sb3I6ICNmZmZmZmY7Cn0KCi5kYXJrLXRoZW1lICN0b2dnbGUtdGhlbWU6aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNmYjhjMDA7Cn0KCi5kYXJrLXRoZW1lICN0b2dnbGUtdGhlbWU6YWN0aXZlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjU3YzAwOwp9

Y29uc3QgdGhlbWVCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndG9nZ2xlLXRoZW1lJyk7CmNvbnN0IGJvZHlFbGVtZW50ID0gZG9jdW1lbnQuYm9keTsKCi8vIFRvZ2dsZSBiZXR3ZWVuIGRlZmF1bHQgbGlnaHQgdGhlbWUgYW5kIGRhcmsgdGhlbWUKdGhlbWVCdXR0b24uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7CiAgYm9keUVsZW1lbnQuY2xhc3NMaXN0LnRvZ2dsZSgnZGFyay10aGVtZScpOyAvLyBUb2dnbGUgdGhlIGRhcmsgdGhlbWUgb24gYW5kIG9mZgp9KTs=

`classList.replace()`-metodia käytetään vaihtamaan light-theme- ja dark-theme-luokkia nykyisen tilan perusteella.

Mitä ominaisuutta käytetään elementin sisäisten tyylien muokkaamiseen?

Miten muuttaisit JavaScriptillä `<div>`-elementin, jonka ID on `box`, taustavärin koralliksi?

Hallitse keskeiset JavaScript-konseptit, kuten luokat, DOM-manipulointi, tapahtumien käsittely ja asynkroninen ohjelmointi. Opiskele dynaamisten ja interaktiivisten verkkosovellusten luomista hallitsemalla käyttäjän vuorovaikutuksia, tietojen hakua ja näyttämistä sekä asynkronisten toimintojen tehokasta käsittelyä. Kurssi yhdistää teoriaa, käytännön haasteita ja tosielämän esimerkkejä, tarjoten käytännön taidot moderniin web-kehitykseen.

Opi JavaScript-luokkien perusteet, luokkien määrittelystä toimintaa laajentavien metodien luomiseen. Tutustu parametriesineiden tehokkaaseen käyttöön, yksityisten ominaisuuksien hallintaan sekä pääsyn rajoittamiseen gettereillä ja settereillä. Hallitse staattiset ominaisuudet ja staattiset metodit sekä hyödynnä luokkaperintää "extends"- ja "super()"-avainsanoilla skaalautuvan ja uudelleenkäytettävän koodin rakentamiseksi.

Hallitse DOM-manipulointi dynaamisten ja interaktiivisten web-sovellusten luomiseksi. Selaa ja muokkaa DOM:n rakennetta, päivitä sisältöä dynaamisesti sekä toteuta parhaat käytännöt turvallisuuden ja suorituskyvyn varmistamiseksi. Erota ominaisuudet ja attribuutit koodin optimointia varten.

Avaa verkkosovellustesi vuorovaikutteisuus hallitsemalla JavaScript-tapahtumat. Ymmärrä tapahtumien eteneminen, hallitse tapahtumien käyttäytymistä ja toteuta tehokas tapahtumien käsittely käyttäjävuorovaikutuksia varten. Optimoi suorituskyky edistyneillä tekniikoilla, kuten tapahtumien delegoinnilla.

Syvenny asynkroniseen JavaScriptiin, mukaan lukien callbackit, Promiset ja async/await. Opi hakemaan dataa API-rajapinnoista, integroimaan kolmannen osapuolen kirjastoja sekä käsittelemään useita pyyntöjä tehokkaasti, kehittäen taitoja datavetoisten sovellusten rakentamiseen.

Elementtien Tyylien Muokkaaminen JavaScriptilla

Sisäisten tyylien muuttaminen style-ominaisuudella

CSS-luokkien lisääminen ja poistaminen classList-ominaisuudella

Käytännön esimerkki: Teeman vaihtaminen

1. Mitä ominaisuutta käytetään elementin sisäisten tyylien muokkaamiseen?

2. Miten muuttaisit JavaScriptillä `<div>`-elementin, jonka ID on `box`, taustavärin koralliksi?

3. Mitä seuraava koodi tekee?