Manipuler les attributs des éléments

45 min Niveau 5

Introduction

JQuery permet de manipuler les différents attributs des éléments HTML. Il permet ainsi d’en ajouter ou d’en modifier, de telle sorte à modifier le comportement de l'élément cible.

Récupérer la valeur d’un attribut ou définir un attribut

La méthode attr() de jQuery permet de récupérer la valeur d'un attribut, d’en ajouter un ou bien d’en modifier un existant.

Pour récupérer la valeur d'un attribut, il faut passer le nom de l’attribut souhaité en argument de la méthode attr(). Cette méthode agira alors comme un getter et ne retournera que la valeur d'attribut du premier élément sélectionné.

Il est également possible de passer une seconde valeur en argument de cette méthode. De la sorte, le premier argument permettra de cibler l’attribut souhaité, tandis que le second permettra de définir sa valeur. Ainsi si l’attribut existe déjà, alors il sera modifié, tandis que s’il n’existe pas, il sera créé.

<!-- Code HTML avant exécution -->
<body>
    <div class="container">
        <h1>Cours jQuery</h1>
        <span>Un élément span</span>
        <p id="text2">Un deuxième paragraphe</p>
    </div>
    <p>Un paragraphe en dehors du div</p>
    <p>Un <a href="https://www.google.com">lien</a> vers Google</p>
    <span id="valAttr"></span>
</body>

$(document).ready(function(){
    // récupération de l'id des balises "p" et stockage dans la 
    // variable "pid"
    let pid = $("p").attr("id");

    // insertion de la valeur de l'attribut "id" de la balise "p"
    // dans l'élément possédant l'id "valAttr"
    $("#valAttr").textContent = "Premier id de p : " + pid;
    // ajout de l'attribut "target", avec la valeur "_blank" sur
    // toutes les balises <a>
    $("a").attr("target","_blank");
});

Après application du jQuery :

<!-- Code HTML avant exécution -->
<body>
    <div class="container">
        <h1>Cours jQuery</h1>
        <span>Un élément span</span>
        <p id="text2">Un deuxième paragraphe</p>
    </div>
    <p>Un paragraphe en dehors du div</p>
    <p>Un <a href="https://www.google.com" target="_blank">lien</a> vers           Google</p>
    <span id="valAttr">Premier id de p : p1</span>
</body>

La méthode prop() et les propriétés du DOM

La méthode prop() permet de récupérer la valeur d'attribut du premier élément sélectionné, ou d'ajouter des attributs à chaque élément sélectionné ou de modifier la valeur d'un attribut existant.

Elle est similaire à la méthode attr() à ceci près qu’elle interagit sur le contenu HTML en modifiant également le DOM. Il est souvent dit de ces méthodes que attr() prend en compte l’état actuel de l’élément ciblé, tandis que prop() prend en compte son état original.

Pour les versions supérieures à jQuery 1.6 (que vous devriez donc utiliser majoritairement), il est davantage recommandé de se servir de la méthode prop().

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !