HTML-elementin style ominaisuuksia voidaan muuttaa JavaScriptillä muodossa:
elementti.style.ominaisuus = "arvo";
Ympäröidään jokin teksti div-elementeillä ja nimetään se id:llä.
| <div id="esim">Jokin esimerkkiteksti</div> |
Jokin esimerkkiteksti
|
Voimme muuttaa ominaisuuksia esimerkiksi seuraavilla käskyillä:
document.getElementById("esim").style.border = "solid 2px #ff0000";| Arvo | Selitys | Esimerkkiarvo |
| position | mistä kohta mitataan | absolute, relative, static, fixed |
| top | kohta pystysuorassa suhteessa | 140px tai 50% |
| left | kohta vaakasuorassa suhteessa | 100px tai 50% |
| width | leveys | 400px tai 20% |
| height | korkeus | 300px tai 20% |
| maxHeight | maksimikorkeus | 300px tai 20% |
| maxWidth | maksimileveys | 300px tai 20% |
| minHeight | minimikorkeus | 300px tai 20% |
| minWidth | minimileveys | 300px tai 20% |
| overflow | jos sisältö menee yli rajojen | auto, hidden, scroll |
| Arvo | Selitys | Esimerkkiarvo |
| visibility | näkyvyys-näkymättömyys | visible, hidden |
| zIndex | päällekkäisyys | kokonaisluku 1, -2,... |
| display | kuinka näkyy | inline, none, block... |
| Arvo | Selitys | Esimerkkiarvo |
| fontFamily | fontti | arial, serif |
| fontSize | fontin koko | 12px |
| fontStyle | fontin tyyli | normal, italic, oblique |
| color | tekstin väri | #0000ff |
| fontWeight | tekstin boldaus | normal, lighter, bold, bolder |
| textAlign | tekstin alignement | left, right, center, justify |
| textDecoration | alleviivaus, yliviivaus... | none, underline, overline,line-through, blink |
| letterSpacing | merkkien väli | 10px |
| lineHeight | rivien korkeus | 1, 2,... |
| wordSpacing | sanojen väli | 30px |
| Arvo | Selitys | Esimerkkiarvo |
| margin | objektin rajan ulkopuolinen marginaali | 10px |
| marginBottom | alapuolinen ulkomarginaali | 10px |
| marginLeft | vasen ulkomarginaali | 10px |
| marginRigh | oikea ulkomarginaali | 10px |
| marginTop | yläpuolinen ulkomarginaali | 10px |
| padding | objektin rajan sisäpuolen marginaali | 20px |
| paddingTop | yläpuolinen sisämarginaali | |
| paddingBottom | alapuolinen sisämarginaali | |
| paddingRight | oikea sisämarginaali | |
| paddingLeft | vasen sisämarginaali |
| Arvo | Selitys | Esimerkkiarvo |
| border | rajan ominaisuudet peräkkäin | solid 2px #000000 |
| borderColor | rajan väri | #ff0000 |
| borderWidth | rajan leveys | 2px |
| borderStyle | rajan tyyli | none, solid, dotted, dashed, double... |
| Arvo | Selitys | Esimerkkiarvo |
| backgroundColor | taustaväri | #343415 |
| backgroundImage | taustakuva | url('kuvan osoite') |
| backgroundPosition | taustakuvan aloituskohta | x-kohta y-kohta eli esim. 50px 100px tai 50% 20% |
| backgroundRepeat | taustakuvan toisto | repeat, repeat-x, repeat-y, no-repeat |