JS

Modification du contenu et des styles

Modification du Contenu et des Styles des Éléments HTML en JavaScript


La modification du contenu et des styles des éléments HTML est une tâche courante en développement web. Cela permet de dynamiser et de personnaliser l'apparence et le comportement des pages web.


1. Modification du Contenu :


JavaScript permet de modifier le contenu textuel et HTML des éléments HTML en utilisant les propriétés textContent et innerHTML.


  • textContent : Modifie le texte brut d'un élément.
  • innerHTML : Modifie le contenu HTML d'un élément, y compris les balises HTML.


Exemples de Modification du Contenu :


// Sélection de l'élément avec l'ID "monElement"
let monElement = document.getElementById('monElement');

// Modification du texte brut de l'élément
monElement.textContent = "Nouveau texte";

// Modification du contenu HTML de l'élément
monElement.innerHTML = "<strong>Nouveau</strong> texte en <em>HTML</em>";


2. Modification des Styles :


JavaScript permet également de modifier les styles CSS des éléments HTML en utilisant la propriété style. Vous pouvez accéder aux différentes propriétés CSS et les modifier dynamiquement.


Exemples de Modification des Styles :


// Sélection de l'élément avec l'ID "monElement"
let monElement = document.getElementById('monElement');

// Modification du style CSS de l'élément
monElement.style.color = "red";
monElement.style.fontSize = "20px";
monElement.style.backgroundColor = "#f0f0f0";


3. Ajout et Suppression de Classes :


En plus de la modification directe des styles CSS, vous pouvez également ajouter et supprimer des classes CSS aux éléments HTML en utilisant les méthodes classList.add() et classList.remove().


Exemples d'Ajout et de Suppression de Classes :


// Sélection de l'élément avec l'ID "monElement"
let monElement = document.getElementById('monElement');

// Ajout d'une classe CSS à l'élément
monElement.classList.add('nouvelleClasse');

// Suppression d'une classe CSS de l'élément
monElement.classList.remove('ancienneClasse');


4. Modification d'Attributs :


En plus du contenu et des styles, vous pouvez également modifier les attributs HTML des éléments en utilisant les méthodes setAttribute() et removeAttribute().


Exemples de Modification d'Attributs :


// Sélection de l'élément avec l'ID "monElement"
let monElement = document.getElementById('monElement');

// Ajout d'un attribut à l'élément
monElement.setAttribute('data-id', '123');

// Suppression d'un attribut de l'élément
monElement.removeAttribute('data-id');


5. Manipulation de la Structure :


JavaScript permet également de manipuler la structure des éléments HTML, en ajoutant, en supprimant ou en déplaçant des éléments dans le DOM.


En résumé, la modification du contenu et des styles des éléments HTML en JavaScript permet de créer des interfaces utilisateur dynamiques et interactives. En comprenant comment accéder aux éléments, modifier leur contenu et leurs styles, vous pouvez personnaliser l'apparence et le comportement des pages web pour répondre aux besoins de votre application.

334 vues
Posté le 02 avril 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
4 561 vues
Afficher la liste des topics
Dans notre dossier f_forum, nous allons créer une nouvelle page sujet.php. Cette page affichera la liste des topiques créer par les utilisateurs de votre site en fonction de la catégorie...
Créer son site
3 415 vues
Formulaire d'inscription en PHP (2/2)
Dans cette deuxième partie nous allons compléter et sécuriser notre formulaire avec différentes conditions.Par exemple nous allons utiliser la function crypt de PHP.Exemple :<?php ...
Créer son site de rencontres
469 vues
Sélecteurs d'attribut : styliser en fonction des attributs des éléments HTML
Sélecteurs d'Attribut : Styliser en fonction des attributs des éléments HTMLLes sélecteurs d'attribut en CSS permettent de cibler des éléments HTML en fonction de la présence ou de la valeur...
CSS
524 vues
Utilisation de Fetch pour effectuer des requêtes HTTP
Utilisation de Fetch pour Effectuer des Requêtes HTTPLa méthode Fetch est une fonction native de JavaScript utilisée pour effectuer des requêtes HTTP vers des ressources distantes, telles que des...
JS
2 617 vues
Barre de menu intelligente
Vous en avez marre de dupliquer votre code afin d'ajouter un nouveau lien sur votre barre de menus ?Alors dans cette vidéo vous allez apprendre à vous simplifier la vie en utilisant la fonction...
Créer son site de rencontres
15 856 vues
Modifier un profil PHP
Après avoir créé notre page profil, nous allons créer une nouvelle page afin de modifier certaines données de l'utilisateur !La modification d'un profil se fait également par un...
Créer son site
3 230 vues
Afficher ses utilisateurs en PHP
Maintenant que nous avons créé notre formulaire d’inscription et de connexion nous allons afficher tous nos utilisateurs du site afin de visiter par la suite les autres profils du site.
Créer son site de rencontres
1 094 vues
Inline CSS : l'ajout de styles directement dans les balises HTML
Inline CSS : L'ajout de styles directement dans les balises HTMLL'Inline CSS est une méthode de stylisation où les styles sont appliqués directement à un élément HTML via l'attribut style. Cela...
CSS
Publicité
Cette pub permet au site de vivre ...