Sommaire

Modifier des éléments dans la page web

1. Modifier un attribut HTML dans un élément

Dans ce premier exemple, pour un élément d’une page, nous allons modifier la valeur d’un de ses attributs HTML existants.

Voici l’élément HTML initial :

<h1 id="titre-principal" align="center">Vulputate Sollicitudin Condimentum Bibendum</h1>

Cet élément <h1> possède l’attribut align, avec la valeur center. Vous pouvez dire qu’il n’est pas très judicieux d’utiliser des attributs pour effectuer une mise en forme, qu’il vaut mieux utiliser des CSS. C’est parfaitement exact, mais l’objectif est ici de vous montrer l’utilisation d’une méthode du DOM.

Voici son affichage initial :

images/C03-014.png

Notre objectif va être d’appliquer un alignement à droite. La première étape va être de cibler cet élément <h1> par son id. Ensuite, nous allons accéder à l’attribut align, pour en modifier la valeur.

Voici le script inséré dans le fichier HTML :

<script> 
    var titreH1 = document.getElementById(’titre-principal’) ; 
    titreH1.setAttribute(’align’,’right’); 
</script>

Étudions ce code très simple :

  • Nous créons une variable nommée titreH1.

  • Avec le DOM, nous accédons à l’élément HTML dont l’identifiant ...