La méthode attr() en jQuery
La méthode attr() en jQuery
-
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.
-
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"}); }); }); -
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>