Méthode attr

La méthode attr permet d'obtenir et de modifier n'importe quel attribut d'un élément.

Il est important de ne pas confondre les propriétés et les attributs des éléments. Lors de la création de l'arbre DOM, les attributs sont convertis en propriétés DOM correspondantes des éléments. Leurs noms ne coïncident pas toujours, pas plus que leurs valeurs. Certaines propriétés peuvent également ne pas avoir d'attributs correspondants, elles peuvent être obtenues et définies uniquement en utilisant la méthode prop, par exemple la propriété tagName.

Syntaxe

Obtenir la valeur d'un attribut :

$(sélecteur).attr(nom de l'attribut);

Modifier la valeur d'un attribut :

$(sélecteur).attr(nom de l'attribut, nouvelle valeur);

Modifier les valeurs de plusieurs attributs :

$(sélecteur).attr({premier_attribut: nouvelle_valeur, deuxième_attribut: nouvelle_valeur, ...});

Application d'une fonction à chaque élément de l'ensemble :

$(sélecteur).attr(nom de l'attribut, function(numéro dans l'ensemble, valeur actuelle de l'attribut));

Exemple

Dans l'exemple suivant, nous obtiendrons un input par son id et afficherons à l'écran la valeur de son attribut value :

<input type="text" value="!!!" id="test">

let value = $('#test').attr('value');
console.log(value);

Exemple

Et maintenant, écrivons une nouvelle valeur 'www' dans ce même attribut :

<input type="text" value="!!!" id="test"> $('#test').attr('value', 'www');

Le code HTML deviendra alors :

<input type="text" value="www" id="test">

Exemple

Changeons simultanément les attributs type et value :

<input type="text" value="!!!" id="test"> $('#test').attr({value: 'www', type: 'password'});

Le code HTML deviendra alors :

<input type="password" value="www" id="test">

Exemple

Modifions l'attribut value de chaque input - ajoutons au value actuel le numéro d'ordre de l'élément dans l'ensemble :

<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

$('input').attr('value', function(index, value) {
	return value + ' ' + index;
});

Le code HTML deviendra alors :

<input type="text" value="aaa 1">
<input type="text" value="bbb 2">
<input type="text" value="ccc 3">

Voir aussi

la méthode removeAttr,
qui permet de supprimer les attributs des éléments
la méthode prop,
qui permet de travailler avec les propriétés des éléments
la méthode val,
qui permet d'obtenir et de modifier la valeur actuelle d'un élément