Ajouter et lire un attribut d’un élément HTML avec Jquery 3 janvier , 2010
Nous allons commencer par lire un attribut d’un élément HTML à l’aide de jquery.
Pour cela nous allons utiliser la fonction .attr(« nom_de_l_attribut ») :
Considérons le code HTML suivant :
<div class="contenu" id="mes-liens"> Le contenu <a id="lien-xenetis" title="Xenetis.org tutoriel linux debian ubuntu" href="http://www.xenetis.org">Xenetis.org</a> </div> |
Pour récupérer par exemple le titre du lien on peut le faire de la manière suivante avec jquery:
var titre = $("#lien-xenetis").attr("title"); |
La variable titre contiendra : Xenetis.org tutoriel linux debian ubuntu
Pour récupérer l’id du div conteneur on pourra utiliser le code jquery suivant:
var id_conteneur = $("div.mes-liens").attr("id"); |
Passons maintenant à l’attribution d’une valeur à un élément :
Avec le code HTML suivant :
<div class="contenu" id="mes-liens"> Le contenu <a id="lien-xenetis" href="http://www.xenetis.org">Xenetis.org</a> </div> |
Attribuons un titre au lien de la manière suivante :
$("#lien-xenetis").attr("title", "Xenetis.org tutoriel linux debian ubuntu"); |
On peut aussi indiquer à ce lien de s’ouvrir sur une nouvelle page:
$("#lien-xenetis").attr("target", "_blank"); |
L’accès au classe se fait donc par un . et aux id par un # (comme en CSS du coup) 😉
var titre = $("#lien-xenetis").attr("title"); var id_conteneur = $("div.mes-liens").attr("id"); |
C’est donc aussi simple d’activer et de désactiver un élément grâce à ce code :
// Désactive l'élément test $("#test").attr('disabled', 'disabled'); // Active l'élément test $("#test").attr('disabled', ''); |
On peut donc désactiver un bouton au moment ou le formulaire est posté :
<form id="monform" action="action.php" method="post"> <input name="username" /> <input id="submit" type="submit" /> </form> |
Avec le code suivant :
$('#monform').submit( function(){ $('input[type=submit]', this).attr('disabled', 'disabled'); } ); |
Il est aussi possible de supprimer un attribut d’un élément html avec removeAttr:
<div class="contenu" id="mes-liens"> Le contenu <a id="lien-xenetis" title="Xenetis.org tutoriel linux debian ubuntu" href="http://www.xenetis.org">Xenetis.org</a> </div> |
Retirons le titre de ce lien :
$("#lien-xenetis").removeAttr("title"); |
Ce qui donnera :
<div class="contenu" id="mes-liens"> Le contenu <a id="lien-xenetis" href="http://www.xenetis.org">Xenetis.org</a> </div> |
Laissez une réponse
Dks a dit:
merci pour ce tuto bien détaillé!
Nicolo a dit:
De rien 😉