Javascript ja CSS
Tyylejä voidaan javascriptillä muokata monella tasolla:
- Voidaan editoida dokumenttiin linkitettyä CSS-tiedostoa ja muokata sen sisältämiä CSS-sääntöjä
- Voidaan muokata jokaisen elementin omia asetuksia elementti.style-attribuutin kautta
- Voidaan muokata muuttamalla html:ssä elementin style-attribuuttia: elementti.setAttribute("style", "tähän tyylit")
- Voidaan muokata dokumentissa olevaa style-elementtiä ja sen sisältämiä css-sääntöjä
- Voidaan vaihtaa elementin class-attribuutin arvoja jos on CSS-tiedostoon tai style-elementtiin luotu sopivat tyylit
Käytännössä dynaamiset muutokset pitää tehdä elementtikohtaisesti. HTML:n sisällön kautta style-attribuuttia ei kannata muokata, koska suora javascript-rajapinta on kätevämpi ja näppärämpi. Elementtikohtaisissa muutoksissa tosin joutuu kirjoittamaan paljon koodia ja tätä vähentää jos CSS-tiedostosta löytyvät jo kaikki tarpeelliset tyylit eikä tarvitse javascript-koodissa tehdä muuta kuin muuttaa elementin class-attribuuttia.
Jos täytyy muuttaa yksittäistä css-ominaisuutta niin se on järkevintä tehdä DOM-rajapinnan kautta:
element.style.property = "uusi tyylimääritys"Jos on olemassa jo valmis tyyli niin voi tehdä näin:
element.setAttribute("class", "tyyli");Huomaa, että element.style ei ole sama asia kuin element.setAttribute("style", "..."). Ensimmäinen palauttaa CSSStyleDeclaration-objektin, jonka attribuutteina ovat kaikki CSS-ominaisuudet. Jälkimmäinen vain asettaa uuden arvon HTML-koodissa olevalla style-attribuutille. Suositeltavaa on käyttää ensimmäistä.
CSS-tiedostoa tai style-elementtiä ei normaalisti joudu ohjelmallisesti muokkaamaan, koska ne ovat jo jotain muuta kautta valmiiksi käyttökelpoiset ja suoraan editoitavissa.
Vaihtoehtoina ovat siis kaikki samat mitä normaalistikin HTML:ää ja CSS:ää kirjoitettaessa ja näiden lisäksi vielä erillinen rajapinta.
Käyttäjien kommentit