Web-tutoriel

Tutoriels javascript css php java jquery

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>

2 Reponses à “Ajouter et lire un attribut d’un élément HTML avec Jquery
Le 21 octobre 2011 à 10 h 01 min
Dks a dit:

merci pour ce tuto bien détaillé!

Le 9 décembre 2011 à 15 h 07 min
Nicolo a dit:

De rien 😉

Laissez une réponse

Nom (requis)

Email (requis)

Site Web

Haut