jQuery HTML Méthode attr()

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>

JQuery les méthodes pour manipuler HTML

Par gerywa 25 juillet 2014

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

Référence jQuery ajax

Définition et usage méthode attr()

Retour de valeur d'attribut

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

Définir attribut / valeur

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

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

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

Définir multiples paires attribut / valeur

La méthode secrète likes sans fin sur Facebook