Les cours javascript : Accéder aux css

Page d'introduction

Introduction

Infos

Dans ces cours javascript sur les propriétés javascript css vous allez apprendre comment modifier une propriété javascript css globale et une propriétés css javascript ponctuelle.
Descendre
Remonter

L'attribut style

Accéder à l'attribut style

Une propriété javascript css ponctuelle est une propriété css que vous avez mise dans l'attribut HTML ou XHTML style;
Par exemple :
Exemple de code :
<div style="font-weight:bold" id="dmc"></div>

Code javascript :
Exemple de code :
<script type="text/javascript">
objectJavascript = document.getElementById("dmc");
alert(objectJavascript.style.fontWeight);
//Retourne "bold"
</script>


En règle générale, lorsque vous récupérez des propriétés javascript css non déclarées, la valeur retournée sera une chaîne vide soit "". Par exemple :
Exemple de code :
<style type="text/css">
#dmc{
  font-style : italic;
}
</style>

<div style="font-weight:bold" id="dmc"></div>

<script type="text/javascript">
$objectJavascript = document.getElementById("dmc");
  alert(objectJavascript.style.fontWeight);
  //Retourne "bold"
  alert(objectJavascript.style.fontStyle);
  //Retourne "" une chaîne vide
</script>
Descendre
Remonter

La feuille de style css

Acceder à toutes les propriétés css

La propriété javascript css globale, c'est lorsque vous récupérez la valeur de la propriété javascript css en tenant compte des feuilles de style css assignées à la balise (balise style ou feuille de style externe) en plus des celles misent dans l'attribut HTML ou XHTML style.
Exemple de code :
<style type="text/css">
#dmc{
/*font-style : italic;*/
}
</style>

<div style="font-weight:bold" id="dmc"></div>

<script type="text/javascript">
alert(getvalueCSS("dmc","fontWeight"));
//Retourne "bold"
alert(getvalueCSS("dmc","fontStyle"));
//Retourne "normal" ou "400" suivant le navigateur
// et si vous enlever les commentaire autour de font-style
//Retourne "italic"

function getvalueCSS(ObjetStyle,styleProp){
var ObjetStyle = document.getElementById("dmc");
var result="";
if (ObjetStyle.currentStyle){
result = ObjetStyle.currentStyle[styleProp];
}else if (window.getComputedStyle){
result =document.defaultView.getComputedStyle(ObjetStyle,null)[styleProp];
}
return result;
}
</script>
Descendre
Remonter