|
Grâce
à la puissance et la simplicité du DOM, il est possible de
totalement contrôler les éléments présents sur une page Web
et leur affichage, ceci via JavaScript et les CSS. Un problème
peut cependant surgir quand on cherche à combiner des appels
de références JavaScript à des propriétés CSS, par exemple
dans le code suivant :
document.getElementById('monElement').style.background
= "background";
ou avec IE
document.all.monElement.style.background
= "background";
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Ce problème tient au fait que références et propriétés ne
sont pas forcément nommées de la même manière, ce qui peut
amener à une confusion gênante lors du développement. Voici
donc un tableau, aussi exhaustif que possible, listant les
propriétés et références dont le nom diverge.
|
Tableau
des équivalences en référence JavaScript
et propriétés CSS
|
|
JavaScript
|
CSS
|
|
textDecoration
textDecorationLineThrough
textDecorationNone
textDecorationUnderline
textDecorationOverline
textIndent
textTransform
|
text-decoration
text-decoration: line-through
text-decoration: none
text-decoration: underline
text-decoration: overline
text-indent
text-transform
|
|
styleFloat
|
float
|
|
listStyle
listStyleImage
listStylePosition
listStyleType
|
list-style
list-style-image
list-style-position
list-style-type
|
|
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
|
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
|
|
fontFamily
fontSize
fontWeight
fontVariant
|
font-family
font-size
font-weight
font-variant
|
|
borderBottom
borderBottomColor
borderBottomStyle
borderBottomWidth
borderColor
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderStyle
borderTop
borderTopColor
borderTopStyle
borderTopWidth
borderWidth
|
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
|
|
marginBottom
marginLeft
marginRight
marginTop
|
margin-bottom
margin-left
margin-right
margin-top
|
|
lineHeight
|
line-height
|
|
letterSpacing
|
letter-spacing
|
|
verticalAlign
|
vertical-align
|
|
zIndex
|
z-index
|
|
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
|
background-attachment
background-color
background-image
background-position
background-repeat
|
Les autres références/propriétés
correspondent, surtout parce qu'elle sont définies
avec un seul mot : border,
font, margin,
overflow, padding,
position...
|
