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.

81 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
135 vues
Comprendre les concepts de marge, bordure, rembourrage et largeur/hauteur
Dans CSS, la mise en page des éléments est souvent influencée par quatre concepts clés : la marge, la bordure, le rembourrage et la largeur/hauteur. Comprendre ces concepts est essentiel pour...
CSS
140 vues
Introduction à CSS pour la mise en forme
Introduction à CSS pour la mise en formeCSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler...
HTML
3 921 vues
Créer un commentaire
Poster un commentaireDans notre dossier f_forum, nous allons reprendre la page topic.php. Dans cette page nous allons ajouter la possibilité à vos utilisateurs de pouvoir poster des commentaires...
Créer son site
105 vues
Passage de paramètres
Passage de Paramètres dans les Fonctions en JavaScriptLorsque vous appelez une fonction en JavaScript, vous pouvez lui transmettre des valeurs en utilisant des paramètres. Ces paramètres sont des...
JS
1 658 vues
Création de tables avec PhpMyAdmin
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
3 889 vues
Créer sa première page
Attention ! ⚠️ À partir de ce cours je ne détaillerais plus comme le cours précédent.À la place il sera expliqué ce que la vidéo va vous apporter et .. comme toujours le code sera...
Créer son site de rencontres
114 vues
Utilisation de styles en ligne avec l'attribut style
Utilisation de styles en ligne avec l'attribut styleL'attribut style permet de définir des styles CSS directement à l'intérieur des balises HTML. Cela permet d'appliquer des styles spécifiques à...
HTML
117 vues
Structures de contrôle : if, else if, else, switch
Structures de Contrôle en JavaScript1. Structure de Contrôle if :La structure de contrôle if permet d'exécuter des blocs de code conditionnellement, en fonction de l'évaluation d'une expression...
JS
Publicité
Cette pub permet au site de vivre ...