243-image1-fr1238250646.jpg

JavaScript CSS : modifier un style CSS ou une classe CSS avec JavaScript

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

 







 
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

 



 
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
 
 

Auteur : Fabien Branchut

Fabien Branchut
Concepteur de site web depuis 2001 : développement web et SEO. Co-fondateur et directeur web de l'agence Studio Vitamine depuis 2008 : conception e-commerce, chef de projet, stratégie SEO. Site de Fabien Branchut.

Commentaires Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *