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