OUJOOD.COM
Définition et usage méthode attr()
jQuery cours tutorialLa 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
Exemple : 📝 Copier 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)
Exemple : 📝 Copier 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.
|
Exemple : changer les dimensions d'un élément html
Exemple : 📝 Copier 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 :
Exemple : 📝 Copier 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