Elementtien Tyylien Muokkaaminen JavaScriptilla

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).

index.html

index.css

index.js

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.

index.html

index.css

index.js

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.

index.html

index.css

index.js

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

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?

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

Select the correct answer

style

classList

getComputedStyle()

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

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Mitä seuraava koodi tekee?

Select the correct answer

Lisää active-luokan, jos sitä ei ole; poistaa sen, jos se on olemassa.

Asettaa active-luokan painikkeen sisäiseksi tyyliattribuutiksi.

Lisää vain active-luokan poistamatta sitä.

Muuttaa taustavärin aktiiviseksi.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 12

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.22

Elementtien Tyylien Muokkaaminen JavaScriptilla

Pyyhkäise näyttääksesi valikon

Sisäisten tyylien muuttaminen style-ominaisuudella

index.html

index.css

index.js

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

index.html

index.css

index.js

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.

index.html

index.css

index.js

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

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?

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

Select the correct answer

style

classList

getComputedStyle()

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

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Mitä seuraava koodi tekee?

Select the correct answer

Lisää active-luokan, jos sitä ei ole; poistaa sen, jos se on olemassa.

Asettaa active-luokan painikkeen sisäiseksi tyyliattribuutiksi.

Lisää vain active-luokan poistamatta sitä.

Muuttaa taustavärin aktiiviseksi.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 12

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?

Awesome!

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?

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

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