Découvrez les méthodes permettant de manipuler les attributs 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">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