oujood.com

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

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

chercher |

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

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.

  • 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

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



Voir aussi nos tutoriel :

Tutoriel AJAX

Tutoriel AJAX : AJAX est l'art de l'échange de données avec un serveur et les parties de la mise à jour d'une page web - sans recharger la page entière.

Application en Cache

Application en Cache Applications Web hors connexion

right

Définit le bord de la marge droite d'une boîte placée