Découvrez les méthodes jQuery permettant de manipuler les attributs et les classes de vos éléments HTML
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.
$("#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;
});
.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 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.
$("#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;
});
.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 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.
$("#attributs-toogleClass div").click(function(){
$(this).toggleClass("style");
});
.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(classname) permet de tester si un objet ou groupe d'objets possède le nom de class passé en paramètre.
$("#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>");
}
});
});
.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 permet de récupérer ou mettre à jour les attributs d'un élément HTML.
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"));
});
});
<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 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
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>