Tel 
Il est souvent bien pratique de modifier les styles CSS directement avec JavaScript ou alors changer la classe CSS d’un élément HTML avec Javascript.
Je vous ai préparé un petit tutoriel qui vous permettra :
- de modifier le style CSS d’un élément HTML via JavaScript
- d’attribuer une autre classe CSS à un élément HTML via JavaScript
Exemple 1 : modifier un style CSS avec JavaScript
STUDIO VITAMINE :
agence de creation de site internet !
agence de creation de site internet !
Code source (HTML et JavaScript) :
<html>
<style>
#div1{
background-color:#00ff00;
width:300px;
}
</style>
</head>
<body>
<input type="button" value="Changer la couleur de fond en vert"
onclick="javascript:document.getElementById(‘div1′).style.backgroundColor=’#00ff00’;" />
<br />
<input type="button" value="Changer la couleur de fond en rouge"
onclick="javascript:document.getElementById(‘div1′).style.backgroundColor=’#ff0000’;" />
<br />
<input type="button" value="Augmenter la largeur"
onclick="javascript:document.getElementById(‘div1’).style.width=(parseInt(document.getElementById(‘div1′).clientWidth)+25)+’px’;" />
<br />
<input type="button" value="Diminuer la largeur"
onclick="javascript:document.getElementById(‘div1’).style.width=(parseInt(document.getElementById(‘div1′).clientWidth)-25)+’px’;" />
<br />
<input type="button" value="Augmenter la hauteur" onclick="javascript:document.getElementById(‘div1’).style.height=(parseInt(document.getElementById(‘div1′).clientHeight)+25)+’px’;" />
<br />
<input type="button" value="Diminuer la hauteur"
onclick="javascript:document.getElementById(‘div1’).style.height=(parseInt(document.getElementById(‘div1′).clientHeight)-25)+’px’;" />
<br />
<input type="button" value="Augmenter la taille de la police"
onclick="javascript:document.getElementById(‘div1’).style.fontSize=(parseInt(document.getElementById(‘div1′).style.fontSize)+3)+’px’;" />
<br />
<input type="button" value="Diminuer la taille de la police"
onclick="javascript:document.getElementById(‘div1’).style.fontSize=(parseInt(document.getElementById(‘div1′).style.fontSize)-3)+’px’;" />
<br />
<div id="div1" style="font-size:12px;">
STUDIO VITAMINE : <br /><a href="http://blog.studiovitamine.com" target="_blank" title="agence creation site">agence de creation de site internet</a> !
</div>
</body>
</html>
Commentaire :
On peut noter qu’il n’est pas possible de modifier le style CSS font-size si celui-ci est appliqué au niveau de la classe div1 de l’élément HTML. On est alors obligé d’appliquer le style font-size directement sur l’élément HTML lui-même via l’attribut style.
De plus, la taille de la police du lien ne change pas car le style CSS font-size que le code javascript modifie n’est appliqué qu’au texte du div (et pas au texte des liens du div…;-)…).
Pour contourner le problème, une autre solution consiste à appliquer une autre classe à l’élément HTML (voir ci-dessous).
Exemple 2 : modifier une classe CSS avec JavaScript
STUDIO VITAMINE :
agence de creation de site internet !
agence de creation de site internet !
Code source (HTML et JavaScript) :
<html>
<head>
<style>
.divA{
background-color:#ff0000;
width:200px;
}
.divB{
background-color:#00ff00;
width:250px;
padding:20px;
}
.divB a{
color:#000000;
}
.divC{
font-family:arial;
width:400px;
height:50px;
font-size:20px;
text-align:center;
padding:50px;
border:1px solid #000000;
}
</style>
</head>
<body>
<input type="button" value="Appliquer la class CSS ‘divA’"
onclick="javascript:document.getElementById(‘divA’).className=’divA’;" />
<br />
<input type="button" value="Appliquer la class CSS ‘divB’"
onclick="javascript:document.getElementById(‘divA’).className=’divB’;" />
<br />
<input type="button" value="Appliquer la class CSS ‘divC’"
onclick="javascript:document.getElementById(‘divA’).className=’divC’;" />
<br />
<div id="divA" class="divA">
STUDIO VITAMINE : <br /><a href="http://blog.studiovitamine.com" target="_blank" title="agence creation site">agence de creation de site internet</a> !
</div>
</body>
</html>
Correspondances entre les proprietes JavaScript et 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 |
