| css naam | javascript naam | omschrijving | mogelijke waarden | type | javascript voorbeeld | css voorbeeld | erft |
|---|---|---|---|---|---|---|---|
| background-color | backgroundColor | definieer de achtergrond kleur | naam of waarde van de kleur | geldig voor alle elementen | p.style.backgroundColor = '#040' | {background-color: #004400} | nee |
| color | color | definieer de element kleur | naam of waarde van de kleur | geldig voor alle elementen | p.style.color = '#020' | {color:green} | ja |
| css naam | javascript naam | omschrijving | mogelijke waarden | type | javascript voorbeeld | css voorbeeld | erft |
|---|---|---|---|---|---|---|---|
| font-family | fontFamily | bepaal de 'font family' | family name | geldig voor alle elementen | p.style.fontFamily = 'Verdana,sans-serif;' | {font-family: Verdana,sans-serif} | ja |
| font-style | fontStyle | bepaal de font stijl | normal, italic, oblique | geldig voor alle elementen | p.style.fontStyle = 'italic' | {font-style: italic} | ja |
| font-variant | fontVariant | bepaal of het font standaard is of 'small caps' | normal, small-caps | geldig voor alle elementen | p.style.fontVariant = 'small-caps' | {font-variant: small-caps} | ja |
| font-weight | fontWeight | definieer de dikte van het font | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 | geldig voor alle elementen | p.style.fontWeight = 'bolder' | {font-weight: 600} | ja |
| css naam | javascript naam | omschrijving | mogelijke waarden | type | javascript voorbeeld | css voorbeeld | erft |
|---|---|---|---|---|---|---|---|
| list-style | listStyle | definieer van 'list style' het type en/of de positie | none, circle, disc, square, armenian, decimal-leading-zero, decimal, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman, inherit | list-item | object.style.listStyle = 'none' | {list-style: circle} | ja |
| css naam | javascript naam | omschrijving | mogelijke waarden | type | javascript voorbeeld | css voorbeeld | erft |
|---|---|---|---|---|---|---|---|
| margin-bottom | marginBottom | definieer van een element de bottom margin | lengte, waarde of procent | geldig voor alle elementen | object.style.marginBottom='12px' | {margin-bottom:2em} | nee |
| margin-left | marginLeft | definieer van een element de left margin | lengte, waarde of procent | geldig voor alle elementen | object.style.marginLeft='12px' | {margin-left:2em} | nee |
| margin-right | marginRight | definieer van een element de right margin | lengte, waarde of procent | geldig voor alle elementen | object.style.marginRight='12px' | {margin-right:2em} | nee |
| margin-top | marginTop | definieer van een element de top margin | lengte, waarde of procent | geldig voor alle elementen | object.style.marginTop='12px' | {margin-top:2em} | nee |
| css naam | javascript naam | omschrijving | mogelijke waarden | type | javascript voorbeeld | css-voorbeeld | erft |
|---|---|---|---|---|---|---|---|
| line-height | lineHeight | definieer de lijnhoogte | normal,een getal of een percentage van de font-size van het element | geldig voor alle elementen | object.style.lineHeight='2' | {line-height: 2} | ja |
| text-align | textAlign | definieer de uitlijning van een tekst | left, right, center, justify | block | object.style.textAlign='right' | {text-align: center} | ja |
| text-decoration | textDecoration | definieer de speciale 'decoration attributes' van een tekst | none, overline, underline, line-through, blink | geldig voor alle elementen | object.style.textDecoration='none' | {text-decoration: none} | nee |
| text-indent | textIndent | definieer de inspringing van de eerste regel | lengte of een percentage | block | p.style.textIndent='5px' | {text-indent: 5%} | ja |
| text-transform | textTransform | verander de tekst in een andere waarde | none, capitalize, uppercase, lowercase | geldig voor alle elementen | p.style.textTransform='uppercase' | {text-transform: uppercase} | ja |
| vertical-align | verticalAlign | definieer de verticale positie | baseline, sub. super, top, middle, bottom, text-top, text-bottom, of een percentage | inline | p.style.verticalAlign='top' | {vertical-align: sub} | nee |
Met deze tabel is het makkelijk om een css-statement te "vertalen" naar zijn javascript-equivalent. Geheel links in de tabel staat er een css-statement, en gelijk rechts daarvan staat er de javascript-variant (die je in javascript-code kan gebruiken). Zowel voor het javascript als voor de css is er een (uiterst) klein voorbeeldje bijgevoegd.