Objectifs
- Etre capable d'utiliser la méthode attr() en jQuery
Présentation
- La méthode
attr()est utilisée pour définir ou renvoyer les attributs et les valeurs des éléments sélectionnés.- Il existe deux utilisations de la méthode attr() de Query .
- Pour renvoyer une valeur d'attribut: Cette méthode renvoie la valeur du premier élément correspondant.
- Pour définir la valeur d'attribut: Cette méthode est utilisée pour définir une ou plusieurs paires attribut / valeur de l'ensemble d'éléments correspondants.
- Il existe deux utilisations de la méthode attr() de Query .
- La méthode
La méthode attr()
- La méthode
attr()définit ou retourne les valeurs d'attributs de l'éléments choisis. - Cette méthode fonctionne différemment selon les paramètres.
Syntaxe:
- Pour renvoyer la valeur d'un attribut:
$(sélecteur).attr(attribut)- Exemple: Trouver les dimensions d'un élément html
$(function(){ $("button").click(function(){ alert("La largeur de cette image est : " + $("img").attr("width")+" sa hauteur est : " + $("img").attr("height")); }); }); Avec image: src="images/logo-version02.png" alt="logo apcpedagogie.com" width="538" height="569" />
- Pour définir un attribut et une valeur:
$(sélecteur).attr(attribut, valeur)- Exemple: Miniaturiser une image( changer les dimensions d'un élément html)
$(function(){ $("#btn02").click(function(){ $("img").attr("width","350"); }); });
- Pour définir un attribut et une valeur à l'aide d'une fonction:
$(sélecteur).attr (attribut, fonction (index, valeur actuelle))- Exemple: changer les dimensions d'un élément html
$(function(){ $("#btn03").click(function(){ $("img").attr("width",function(n,v){ return v-50; }); }); });
- Pour définir plusieurs attributs et valeurs:
$(sélecteur).attr ({attribut: valeur, attribut: valeur, ...})- Exemple: Définir multiples paires attribut / valeur
$(function(){ $("#btn02").click(function(){ $("img").attr({width:"300",height:"350"}); }); });
- Pour renvoyer la valeur d'un attribut:
Exemple complet :
<!doctype html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Filtre de base First</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn01").click(function(){ alert("La largeur de cette image est : " + $("img").attr("width")+" sa hauteur est : " + $("img").attr("height")); }); $("#btn02").click(function(){ $("img").attr("width","350"); }); $("#btn03").click(function(){ $("img").attr("width",function(n,v){ return v-50; }); }); $("#btn04").click(function(){ $("img").attr({"width":"350","height":"100"}); }); }); </script> </head> <body> <img src="images/logo-version02.png" alt="Pulpit Rock" width="538" height="569" /> <br /> <button id="btn01">Dimensions de l'image</button></br> <button id="btn02">Dimensions de l'image</button></br> <button id="btn03">Dimensions de l'image</button></br> <button id="btn04">Dimensions de l'image</button></br> </body> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body></html>
- La méthode