La méthode attr() définir ou retourner les valeurs d'attributs de l'éléments choisis

Définition et usage méthode attr()

jQuery cours tutorial

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.


Retour de valeur d'attribut

Retourner la valeur d'un attribut pour l'élément sélectionné.

Syntaxe

$(selecteutr).attr(attribut)


Paramètre

Description

attribut

Spécifie l'attribut à récupérer la valeur de

Exemple : Trouver les dimensions d'un élément html

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert("La largeur de cette
image est : " + $("img").attr("width")+" sa hauteur est : " +
$("img").attr("height"));
  });
});
</script>
</head>
<body>
<img
src="http://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Houses_on_the_caldera%2C_Santorini.jpg/170px-Houses_on_the_caldera%2C_Santorini.jpg"
alt="Pulpit Rock" width="284" height="213" />
<br />
<button>Dimensions de l'image</button>
</body>
</html>

 

 


Définir attribut / valeur

Définir l'attribut et la valeur des éléments sélectionnés.

Syntaxe

$(selecteurr).attr(attribut,value)


Paramètre

Description

attribut

Indique le nom de l'attribut

value

Indique la valeur de l'attribut

Exemple : Miniaturiser une image( changer les dimensions d'un élément html)

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
   
$("img").attr("width","150");
  });
});
</script>
</head>
<body>
<img
src="http://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Houses_on_the_caldera%2C_Santorini.jpg/170px-Houses_on_the_caldera%2C_Santorini.jpg"
alt="Pulpit Rock" width="284" />
<br />
<button>Miniaturiser l'image</button>
</body>
</html>

 

Ensemble d'attributs / valeur à l'aide d'une fonction

En utilisant une fonction pour définir la valeur d'attribut pour les éléments sélectionnés.

Syntaxe

$(selecteurr).attr(attribut,function(index,oldvalue))


Paramètre

Description

attribut

Indique le nom de l'attribut

fonction (index, oldValue)

Indique une fonction qui renvoie la valeur d'attribut à définir.

  • Index - facultatif. Reçoit la position d'index du sélecteur
  • oldValue - facultatif. Reçoit la valeur d'attribut actuelles du sélecteur

Exemple : changer les dimensions d'un élément html

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
   
$("img").attr("width",function(n,v){
     
return v-50;
    });
  });
});
</script>
</head>
<body>
<center>
<img
src="http://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Houses_on_the_caldera%2C_Santorini.jpg/170px-Houses_on_the_caldera%2C_Santorini.jpg"
alt="Pulpit Rock" width="284" />
<br />
<button>Miniaturiser l'image</button>
</center>
</body>
</html>
 

Définir multiples paires attribut / valeur

Définir un ou plusieurs attributs et  valeurs pour les éléments sélectionnés.

Syntaxe

$(selecteur).attr({attribut:value, attribut:value, ...})

Exemple :

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script
type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
   
$("img").attr({width:"150",height:"100"});
  });
});
</script>
</head>
<body>
<center>
<img
src="http://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Houses_on_the_caldera%2C_Santorini.jpg/170px-Houses_on_the_caldera%2C_Santorini.jpg" alt="Pulpit Rock" width="284"  height="213" /><br
/>
<button>Miniaturiser l'image</button>
</center>
</body>
</html>

 



Par gerywa 25 juillet 2014