Accéder aux Css en Javascript - Les cours javascript

Comment manipuler les propriétés Css en Javascript

Introduction

Dans ces cours Javascript sur les propriétés Javascript CSS vous allez apprendre comment connaitre/modifier une propriété Javascript CSS globale et une propriété CSS Javascript locale.

La propriété Javascript Css locale est une propriété CSS que vous avez mise dans l'attribut HTML ou XHTML style d'un élément (X)HTML.

La propriété Javascript Css globale est une propriété CSS dont la valeur correspond à la valeur qui est appliquée, tout héritage et poids des sélecteurs appliqués.

L'attribut style stocke des propriétes Css localement

Accéder à l'object style en Javascript

En Javascript, il est possible d'accéder aux propriétés Css misent dans l'attribut style via l'objet style de type CSSStyleDeclaration.
Toute modification de l'objet style entraîne une modification de la valeur de l'attribut style, l'inverse est aussi valable.

Exemple d'accès à l'objet style :
<div style="font-weight:bold;color:green" id="dmc"></div>

Exemple d'utilisation de style en Javascript :
objectJavascript = document.getElementById("dmc"); 
console.log(objectJavascript.style);

Pour identifier la propriété Javascript Css désirée, vous avez deux façons d'écrire la propriété Css :

  • En tant que identifiant de tableau. Dans ce cas, vous mettez le nom de la propriété Css entre crochets.
    Exemple :
    objectJavascript.style["border-right-color"];
  • En tant que propriété Javascript. Dans ce cas, vous devez supprimer les tirets ("-") de la propriété Css et mettre en majuscule la lettre qui suivait le tiret.
    Exemple :
    objectJavascript.style.borderRightColor;

La propriété Javascript Css locale si elle n'est pas définie, a une valeur de vide soit une chaîne vide :

  • la valeur retournée sera une chaîne vide soit "", pour une propriété Javascript CSS non déclarée dans l'attribut style.
  • Pour supprimer une propriété Javascript CSS déclarée, il faut lui assigner une chaîne vide.

Exemple d'utilisation de l'attribut style :
<div style="font-weight:bold;color:green" id="dmc"></div>

Exemple d'utilisation de l'objet style en Javascript :
var objectJavascript = document.getElementById("dmc"); 
alert(objectJavascript.style.fontWeight); 
alert(objectJavascript.style["font-weight"]);
//Retourne "bold"

alert(objectJavascript.style.fontStyle); 
alert(objectJavascript.style["font-style"]); 
//Retourne "" une chaîne vide 

objectJavascript.style.fontSize = "1em";
//objectJavascript.style["font-size"] = "1em";
//L'attribut a maintenant la valeur de 
//style="font-weight:bold;color:green;font-size:1em" 

objectJavascript.style.color= "";
//L'attribut a maintenant la valeur de 
//style="font-weight:bold;font-size:1em"

Accéder à l'attribut style en Javascript

Une autre manière d'accéder à l'attribut est d'utiliser le gestionnaire d'attribut avec la méthode Element.getAttribute(), Element.setAttribute() ou Element.removeAttribute(). Elles vont vous permettre d'avoir une gestion plus globale des propriétés Javascript Css locales.

Prenons l'exemple suivant :
<div style="font-weight:bold; color:green" id="dmc"></div>

Si je veux supprimer l'ensemble des propriétés Css présente dans l'attribut style. Au lieu d'annuler individuellement chaque propriété CSs locale, il me suffit d'utiliser Element.removeAttribute() :

Code Javascript :
objectJavascript = document.getElementById("dmc"); 
objectJavascript.removeAttribute("style");

Si je veux remplacer l'ensemble des propriétés Css présentes dans l'attribut style. Au lieu d'annuler individuellement chaque propriété CSs locale et puis d'en ajouter d'autres localement, il me suffit d'utiliser Element.setAttribute() :

Code Javascript :
objectJavascript = document.getElementById("dmc"); 
objectJavascript.setAttribute("style","font-style : italic; border:1px solid red");

La méthode Element.getAttribute(), ne vous servira qu'a savoir si on a définit un/des propriétés Javascript Css locales :

Code Javascript :
objectJavascript = document.getElementById("dmc"); 
var sValue = objectJavascript.getAttribute("style");
if(sValue == ''){
  // Il n'y a pas de propriété Javascript Css locale
}else{
  // Il y a des propriétés Javascript Css locales
}

Connaître la valeur appliquée de la propriété Css

Accéder à la valeur appliquée de la propriété Css en Javascript

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 mises dans l'attribut HTML ou XHTML style. Elle tient aussi compte des héritages et du poids des sélecteurs.

Code (X)HTML et CSS :
<style type="text/css"> 
  #dmc{ /* font-style : italic; */ } 
</style> 
<div style="font-weight:bold" id="dmc"></div>

Exemple de récupération en Js d'une valeur d'une propriété CSS :
alert(getvalueCSS("dmc","font-weight")); 
//Retourne "bold" 
alert(getvalueCSS("dmc","font-style")); 
//Retourne "normal" ou "400" suivant le navigateur 
// et si vous enlever les commentaires autour de font-style 
//Retourne "italic" 
/**
  * @param sIdObj     valeur de l'attribut id ou un objet HTMLElement
  * @param styleProp  nom de la propriété format Csss
  * @return String|undefined la valeur de la propriété css si trouvée
  */
function getvalueCSS( sIdObj, styleProp ){ 
  var sResult = undefined, oEle = typeof(sIdObj) == "object"? sIdObj : document.getElementById(sIdObj), oCss = null; 
  if ( window.getComputedStyle ) {
    if ( oEle.ownerDocument.defaultView.opener ) {
      oCss = oEle.ownerDocument.defaultView.getComputedStyle( oEle, null );
    }else{
      oCss = window.getComputedStyle( oEle, null );
    }
    sResult =  oCss.getPropertyValue(styleProp); 
  } else if ( document.documentElement.currentStyle ) {
    oCss = oEle.currentStyle;
    if(typeof oCss.getPropertyValue !='undefined'){
      sResult = oCss.getPropertyValue(styleProp);
    }else{
      sResult = oCss[styleProp];
    }  
  }
  return sResult; 
}

Modifier directement les règles Css

Accéder aux règles Css écrite en Javascript

Il est possible d'aller directement modifier les règles mises dans des balises (X)HTML style où dans des feuilles de styles externes si elles fonts parties du même domaine (les règles peuvent varier selon les navigateurs).
Cette technique est vraiment le dernier recours et je ne garantis que cela fonctionne sur tous les navigateurs.
Il faut que l'ensemble des styles soient disponibles donc chargés, votre script doit être déclenché sur l'événement load :

Déclenché mon script qu'en la page est entièrement chargée :
window.addEventListener('load', function() {
  if(modifCSSRule("span::before", "display", "inline") == false){
    J'ai pas trouvé
  }
});

Fonction :
function modifCSSRule(sChemin, sPropriete, sVal){
  var bFind = false;
  var aStyleSheets = document.styleSheets;
  var exp_reg =  new RegExp(sChemin,"gi");
  // si la css est externe et d'un autre nom de domaine
  // cssRules: lève une DOMException: "The operation is insecure."
  // code: 18 
  // message: "The operation is insecure."
  // name: "SecurityError"
  //
  for(var i = 0; i < aStyleSheets.length; ++i){
    try{
      var aCssRules =  aStyleSheets[i].cssRules;
      for(var j = 0; j < aCssRules.length; ++j){   
        if(exp_reg.test(aCssRules[j].selectorText)){ 
          aCssRules[j].style[sPropriete]= sVal;
          bFind = true;
        }//if
      }//for
    }catch(error) {
      //cssRules: lève une DOMException: "The operation is insecure."
      console.log(error);
      continue
    }
  }
  return bFind; 
}

Exemple en live