jQuery Attributs

Découvrez les méthodes jQuery permettant de manipuler les attributs et les classes de vos éléments HTML

La fonction addClass

La fonction addClass va vous permettre d'ajouter un ou plusieurs noms de class au niveau de l'attribut class de(s) élément(s) récupéré(s) par la fonction jQuery. Associée aux styles CSS, cette fonction vous permettra de modifier dynamiquement l'apparence de vos éléments HTML.

javascript
css
html

        
   $("#attributs-addClass a.add").click(function(){
        $("#attributs-addClass div").addClass("style");
        return false;
    });
   $("#attributs-addClass a.remove").click(function(){
          $("#attributs-addClass div").removeClass("style");
          return false;
    });

Ajouter style | Supprimer style

Je peux changer le style de mon texte dynamiquement

.style {
background: #FFE51E;
border:2px solid #333;
font-style:italic;
padding:2px;
}

<div id="attributs-addClass">
<a href="#" class="add">Ajouter style</a> | <a href="#" class="remove">Supprimer style</a>
<div>Je peux changer le style de mon texte dynamiquement</div>
</div>

La fonction removeClass

La fonction removeClass va vous permettre de supprimer un ou plusieurs noms de classe au niveau de l'attribut class de(s) élément(s) récupéré(s) par la fonction jQuery. Associée aux styles CSS, cette fonction vous permettra de modifier dynamiquement l'apparence de vos éléments HTML.

javascript
css
html

        
   $("#attributs-removeClass a.add").click(function(){
        $("#attributs-removeClass div").addClass("style color-red");
        return false;
    });

   $("#attributs-removeClass a.remove").click(function(){
          $("#attributs-removeClass div").removeClass("style");
          return false;
    });

Ajouter style | Supprimer style

Je peux changer le style de mon texte dynamiquement

.style {
background: #FFE51E;
border:2px solid #333;
font-style:italic;
padding:2px;
}

<div id="attributs-removeClass">
<a href="#" class="add">Ajouter style</a> | <a href="#" class="remove">Supprimer style</a>
<div>Je peux changer le style de mon texte dynamiquement</div>
</div>

La fonction toogleClass

La fonction toogleClass va vous permettre d'ajouter ou supprimer un ou plusieurs noms de classe au niveau de l'attribut class de(s) élément(s) récupéré(s) par la fonction jQuery. Si le nom de class est déjà présent alors il sera supprimé, s'il est absent il sera ajouté. Associée aux styles CSS, cette fonction vous permettra de modifier dynamiquement l'apparence de vos éléments HTML.

javascript
css
html

        
   $("#attributs-toogleClass div").click(function(){
          $(this).toggleClass("style");
    });

Cliquez pour intervertir le style

Je peux changer le style de mon texte dynamiquement

.style {
background: #FFE51E;
border:2px solid #333;
font-style:italic;
padding:2px;
}

color-red{
color: red;
}

<div id="attributs-toogleClass">
<div >Cliquez pour intervertir le style</div>
<div>Je peux changer le style de mon texte dynamiquement</div>
<div>Je peux changer le style de mon texte dynamiquement</div>
</div>

La fonction hasClass

La fonction hasClass(classname) permet de tester si un objet ou groupe d'objets possède le nom de class passé en paramètre.

javascript
css
html

        
$("#attributs-hasClass li").each(function(){
        $(this).click(function(){
                  var current = $(this); 
                  current.toggleClass("style");
                  if(current.hasClass("style")){
                      current.html("<span> avec style</span>");
                   } else {
                      current.html("<span> sans style</span>");
                   }
         });
});

sans style
avec style
avec style
sans style

.style {
background: #FFE51E;
border:2px solid #333;
font-style:italic;
padding:2px;
}

<ul id="attributs-hasClass">
<li>sans style</li>
<li class="style">avec style</li>
<li class="style">avec style</li>
<li>sans style</li>
</ul>

La fonction attr

La fonction attr permet de récupérer ou mettre à jour les attributs d'un élément HTML.

Récupération
html
Mise à jour

Pour récupérer la valeur d'un attribut on utilise la syntaxe suivante attr("nomattribut")

        
$("#attributs-attr li").each(function(){
        $(this).click(function(){
              alert("class="+$(this).attr("class"));
         });
});

Cliquez pour connaître ma class
Cliquez pour connaître ma class

<ul id="attributs-attr">
<li>Cliquez pour connaître ma class</li>
<li class="style color-red">Cliquez pour connaître ma class</li>
</ul>

Pour mettre à jour la valeur d'un attribut on utilise la syntaxe suivante attr('nomattribut', 'valeur')

        
$("a.enable").click(function(){
            $("#attributs-attr-maj input").removeAttr('disabled');
            return false;
});
$("a.diseable").click(function(){
           $("#attributs-attr-maj input").attr('disabled', 'disabled');
            return false;
});

Activer | Desactiver

La fonction removeAttr

La fonction removeAttr permet de supprimer un attribut (passé en paramètre) d'un objet jQuery. C'est la fonction jQuery équivalente à la fonction javascript removeAttribute() mais elle a l'avantage de pouvoir être utilisée directement sur un objet jQuery

supprimer attribut
html

Pour supprimer un attribut sur un objet ou un liste d'objets, on utilise la syntaxe suivante removeAttr('nomattribut')

        
$("a.enable").click(function(){
            $("#attributs-attr-remove input").removeAttr('disabled').css("background","#FFF");
            return false;
});
$("a.diseable").click(function(){
           $("#attributs-attr-remove input").attr('disabled', 'disabled').css("background","#999");
            return false;
});

Activer | Desactiver

        <a class="enable" href="#">Activer</a> | <a class="diseable" href="#">Desactiver</a>
        <div id="attributs-attr-remove">
            <input type="text" /> <input type="text" /> <input type="text"/>
        </div>