Javascript ja CSS

malli1.html

Tyylejä voidaan javascriptillä muokata monella tasolla:

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"

HTMLElement.style

CSS Properties Reference

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.

Using dynamic styling information

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/luennot/javascript_ja_css/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-09-12 12:21:23
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta