Manipuler les valeurs de l'attribut class - Les cours javascript

Les divers moyens Javascript de manipuler attribut class

Manipuler en Javascript l'attribut class avec la propriété className

La propriété ElementHTML.className va vous permettre de connaitre ou de spécifier la valeur de l'attribut class :

Exemple d'utilisation de la propriété className : 
// Pour récupérer la valeur de l'attribut class 
var sVal = oElementHTML.className;
// Pour assigner une valeur à l'attribut class 
oElementHTML.className = "newValue newValueA";

Manipuler en Javascript l'attribut class avec les méthodes d'attribut

class est un attribut HTML, on peut donc le manipuler avec les méthodes d'attribut.

  • La méthode ElementHTML.getAttribute("nom_attr") va vous permettre de connaitre la valeur d'un attribut.
  • La méthode ElementHTML.setAttribute("nom_attr", "valeur") de spécifier la valeur de l'attribut.
  • La méthode ElementHTML.removeAttribute("nom_attr") de supprimer l'attribut.

Définitions détaillées des méthodes d'attribut

Exemple d'utilisation des méthodes d'attribut HTML : 
// Pour récupérer la valeur de l'attribut class 
var sVal = oElementHTML.getAttribute('class');
// Pour assigner une valeur à l'attribut class 
oElementHTML.setAttribute("class", "newValue newValueA");

// Pour supprimer la valeur à l'attribut class 
oElementHTML.removeAttribute("class");
oElementHTML.setAttribute("class", "");

Manipuler en Javascript l'attribut class avec la propriété classList

La propriété ElementHTML.classList va vous permettre de manipuler l'attribut class plus de facilité.
La propriété ElementHTML.classList a comme méthodes :

  • La méthode classList.add( nom_class [, nom_class] ), vous permet d'ajouter un nom de classe à ceux qui sont déjà présents dans la valeur de l'attribut class.
  • La méthode classList.remove( nom_class [, nom_class] ), vous permet de supprimer un nom de classe dans ceux qui sont déjà présents dans la valeur l'attribut class.
  • La méthode classList.contains( nom_class ), vous permet de savoir si un nom de classe est présent dans la valeur de l'attribut class.
  • La méthode classList.replace( old_class , new_class ), vous permet replacer si un nom de classe présent dans la valeur de l'attribut class par un autre nom de classe.
  • La méthode classList.toggle( nom_class [, true|false] ), vous permet ajouter ou de supprimer un nom de classe en fonction de sa présence dans la valeur de l'attribut class par un autre nom de classe. Elle renvoie true à l'ajout et false à la suppression.
    Si le second argument est présent et qu'il est à true, "nom_class" est ajouté, s'il est à false, "nom_class" est supprimé.

Exemple d'utilisation des méthodes de classList : 
/* Pour ajouter un nom de class est dans la valeur à l'attribut class
- valeur initiale de l'attribut class = "myClass maclass"
- valeur après traitement de l'attribut class = "myClass maclass nomClass" */
oElementHTML.classList.add("nomClass");

// Pour savoir si le nom de class est présent dans la valeur à l'attribut class
var bExiste = oElementHTML.classList.contains("nomClass");

/* Pour supprimer un nom de class dans la valeur à l'attribut class 
- valeur initiale de l'attribut class = "myClass maclass nomClass"
- valeur après traitement de l'attribut class = "myClass maclass" */
oElementHTML.classList.remove("nomClass"); 

/* Pour remplacer un nom de class dans la valeur à l'attribut class 
- valeur initiale de l'attribut class = "myClass maclass nomClass"
- valeur après traitement de l'attribut class = "myClass maclass newClass" */
oElementHTML.classList.replace("nomClass", "newClass");

Comment ajouter un nouveau nom classe dans la valeur de l'attribut class?

Ajouter un nom de classe en Javascript

La méthode Javascript addClass va vous permettre d'ajouter un nom de classe dans l'attribut class d'un objet HTML. La méthode Javascript addClass est compatible avec des anciens navigateurs.

  • oEle est l'objet cible sur lequel vous allez intervenir.
  • sClassName est le nom de la classe que vous désirez ajouter de l'attribut class.
Méthode Javascript pour ajouter une classe : 
function addClass(oEle, sClassName){
  if(oEle!=undefined && typeof(oEle.className) != "undefined" && sClassName!=undefined && sClassName !=''){
    if(typeof(oEle.classList) != "undefined"){
      oEle.classList.add(sClassName);
    }else{
      var sClassEl =  oEle.className, bHasClass = sClassEl.indexOf(sClassName)!=-1;
      if(bHasClass == false){
        var aClassName = sClassEl.split(" "); aClassName.push(sClassName);
        oEle.className = aClassName.join(" ");
      }//if
    }
  }//if
}//fct

Si vous ne désirez pas avoir de compatibilité avec les anciens navigateurs, vous pouvez directement utiliser la méthode oElementHTML.classList.add(). A ce jour (01/2019) tous les navigateurs sont compatibles avec cette méthode.

Comment supprimer un nom classe dans la valeur de l'attribut class?

Supprimer un nom de classe en Javascript

La méthode Javascript removeClass va vous permettre de supprimer un nom de classe dans l'attribut class d'un objet HTML. La méthode Javascript removeClass est compatible avec des anciens navigateurs.

  • oEle est l'objet cible sur lequel vous allez intervenir.
  • sClassName est le nom de la classe que vous désirez supprimer de l'attribut class.
Méthode Javascript pour supprimer une classe : 
function removeClass(oEle, sClassName){
  if(oEle!= undefined && typeof(oEle.className) != "undefined" && sClassName!=undefined && sClassName !=''){
    if(typeof(oEle.classList) != "undefined"){
      oEle.classList.remove(sClassName);
    }else{
      var sClassEl =  oEle.className, bHasClass = sClassEl.indexOf(sClassName)!=-1, asClassElNew = [];
      if(bHasClass){
        var aClassName = sClassEl.split(" "), iNb = aClassName.length;
        for(var i = 0; i< iNb; i++){
          if( aClassName[i] != sClassName){
            asClassElNew.push(aClassName[i]);
          }//if
        }//for
        oEle.className = asClassElNew.join(" ");
      }//if
    }
  }//if
}//fct

Si vous ne désirez pas avoir de compatibilité avec les anciens navigateurs, vous pouvez directement utiliser la méthode oElementHTML.classList.remove(). A ce jour (01/2019) tous les navigateurs sont compatibles avec cette méthode.

Comment savoir si le nom de classe est présent dans la valeur de l'attribut class?

Tester la présence d'un nom de classe en Javascript

La méthode Javascript hasClass va vous permettre de tester la présence d'un nom de classe dans la valeur l'attribut class d'un objet HTML. La méthode Javascript hasClass est compatible avec des anciens navigateurs.

  • oEl est l'objet cible sur lequel vous allez intervenir.
  • sFindClass est le nom de la classe dont vous désirez tester la présence dans la valeur de l'attribut class.

La méthode Javascript hasClass retourne :
  • true : si le nom de la classe est trouvé,
  • false : si le nom de la classe n'est pas trouvé.
Méthode Javascript pour tester la présence d'un nom de classe : 
function hasClass(oEl, sFindClass){
  if(oEl != undefined  && sFindClass != undefined && sFindClass !=''){
    if(typeof(oEl.classList) != "undefined"){
      return oEl.classList.contains(sFindClass);
    }else{
      var sClassEl =  oEl.className, aClassName = sClassEl.split(" ");
      return aClassName.indexOf(sFindClass)!=-1;
    }//else
  }
  return false;
}//fct

//Exemple : 
var oEl = document.getElementById('MonElement');
  alert(hasClass(oEl, 'maClass'));

Si vous ne désirez pas avoir de compatibilité avec les anciens navigateurs, vous pouvez directement utiliser la méthode oElementHTML.classList.contains(). A ce jour (01/2019) tous les navigateurs sont compatibles avec cette méthode.

Comment replacer un nom classe par un autre dans la valeur de l'attribut class?

Replacer un nom classe par un autre nom classe

La méthode Javascript replaceClass va vous permettre de tester la présence d'un nom de classe dans la valeur l'attribut class d'un objet HTML. La méthode Javascript replaceClass est compatible avec des anciens navigateurs.

  • oEl est l'objet cible sur lequel vous allez intervenir.
  • sOldClass est le nom de la classe que vous voulez remplacer dans la valeur de l'attribut class.
  • sNewClass est le nom de la classe qui remplacera sOldClass.
La méthode Javascript replaceClass retourne :
  • true : si le nom de la classe est remplacé,
  • false : si le nom de la classe n'est pas remplacé.
Méthode Javascript pour replacer un nom de classe : 
function replaceClass(oEl, sOldClass, sNewClass){
  if(oEl != undefined  && sOldClass != undefined  && sNewClass != undefined && sOldClass !='' && sNewClass !=''){
    if(typeof(oEl.classList) != "undefined"){
      return oEl.classList.replace(sOldClass, sNewClass);
    }else{
      var sClassEl =  oEl.className, aClassName = sClassEl.split(" "), iFind  = aClassName.indexOf(sOldClass);
      if(iFind !=-1){
        aClassName[iFind] = sNewClass;
        oEl.className = aClassName.join(" ");
        return true;
      }//if
    }//else
  }//if
  return false;
}//fct

//Exemple : 
var oEl = document.getElementById('MonElement');
replaceClass(oEle,"bordure-rouge","bordure-green");

Si vous ne désirez pas avoir de compatibilité avec les anciens navigateurs, vous pouvez directement utiliser la méthode oElementHTML.classList.replace(). A ce jour (01/2019) tous les navigateurs sont compatibles avec cette méthode.

Comment faire un effet de type toggle?

Qu'est-ce que le type toggle

Dans l'exemple suivant, nous ferons un effet de toggle. C'est à dire que si, le nom de la classe n'existe pas dans les valeurs de l'attribut class, on l'ajoute et dans le cas contraire on le supprime de l'attribut class.

Exemple de manipulation de class de type toggle

La méthode Javascript toggleClass est compatible avec des anciens navigateurs.

  • oEl est l'objet cible sur lequel vous allez intervenir.
  • sFindClass est le nom de la classe que vous désirez supprimer ou ajouter de l'attribut class.
  • bForce : optionnel, true force l'ajout, false force la suppression class.
La méthode Javascript toggleClass retourne :
  • true quand il y a un ajout,
  • false quand il y a une suppression.

Si vous ne désirez pas avoir de compatibilité avec les anciens navigateurs, vous pouvez directement utiliser la méthode oElementHTML.classList.toggle(). A ce jour (01/2019) tous les navigateurs sont compatibles avec cette méthode.

Code Javascript pour l'exemple : 
function toggleClass(oEl, sFindClass, bForce){
  if(typeof(oEl.classList) != "undefined"){
    return oEl.classList.toggle(sFindClass, bForce);
  }else{
    var sClassEl =  oEl.className, bHasClass = sClassEl.indexOf(sFindClass)!=-1; 
    if(bForce === false || (bForce == undefined && bHasClass)){
      removeClass(oEl, sFindClass);
      return false;
    }else{
      addClass(oEl, sFindClass);
      return true;
    }
  }//else
}//fct

Code HTML pour l'exemple : 
<style>.bordure-bt{
  cursor:pointer;
  border:1px solid green
}
.bordure-rouge{
  border:1px solid red;
}
</style>
<div class="bordure-bt" onclick="toggleClass(this,'bordure-rouge')"> Cliquer moi </div>

Cliquer moi

Comment transformer la valeur de l'attribut class en un tableau de noms de classe?

Transformer la valeur de l'attribut en un tableau de valeurs

La méthode Javascript classValToArray va vous permettre de transformer la valeur de l'attribut class d'un objet HTML en un tableau de noms de classe. La méthode Javascript classValToArray est compatible avec des anciens navigateurs.

  • oEl est l'objet cible sur lequel vous allez intervenir.
La méthode Javascript classValToArray retourne :
  • Array : tableau des valeurs de noms de classe,
  • null : si oEl n'est pas un ElementHTML.
Code Javascript pour l'exemple : 
function classValToArray(oEl){
  if(oEl != undefined){
    var aList = [];
    if(typeof(oEl.classList) != "undefined"){
      aList = Array.prototype.slice.call(oEl.classList);
    }else{
      var expReg = / {2,}/gi, sClassEl =  oEl.className, sClassEl = sClassEl.replace(expReg," ");
      aList = sClassEl.split(" ");
    }//else 
    return aList;
  }//if
  return null;
}//fct

Si vous ne désirez pas avoir de compatibilité avec les anciens navigateurs, vous pouvez directement utiliser la méthode oElementHTML.classList. A ce jour (01/2019) tous les navigateurs sont compatibles avec cette méthode.