Travailler avec les styles dans le DOM
Lorsque vous travaillez avec le Document Object Model (DOM) en JavaScript, la manipulation des styles est une exigence courante. Cet article couvrira différentes méthodes pour appliquer des styles aux éléments DOM, y compris les styles en ligne, la définition des styles à l'aide de la propriété style, et la manipulation de classes avec les méthodes classList. À la fin de ce guide, vous serez en mesure de gérer et de modifier efficacement les styles dans vos projets web.
Styles en ligne
Les styles en ligne vous permettent d'appliquer du CSS directement à un élément HTML via l'attribut style. Cette approche est utile pour des modifications de style rapides et ponctuelles, mais n'est pas recommandée pour la maintenance de projets à grande échelle en raison de son manque d'évolutivité et de séparation des responsabilités.
Exemple
<div id="inlineStyleExample">This text will be styled using inline styles.</div>
<button onclick="applyInlineStyle()">Apply Inline Style</button>
<script>
function applyInlineStyle() {
const element = document.getElementById('inlineStyleExample');
element.style.color = 'red';
element.style.fontSize = '20px';
}
</script>Dans cet exemple, le clic sur le bouton appliquera des styles en ligne à l'élément div, modifiant sa couleur de texte en rouge et sa taille de police à 20 pixels.
Définition des styles à l'aide de la propriété style
La propriété style en JavaScript vous permet de modifier dynamiquement les propriétés CSS d'un élément. Cette méthode offre plus de flexibilité que les styles en ligne et vous permet de modifier les styles de manière programmatique.
Exemple
<div id="stylePropertyExample">This text will be styled using JavaScript.</div>
<button onclick="applyStyleProperty()">Apply Style Property</button>
<script>
function applyStyleProperty() {
const element = document.getElementById('stylePropertyExample');
element.style.color = 'blue';
element.style.fontSize = '18px';
element.style.margin = '10px';
}
</script>Dans cet exemple, le clic sur le bouton appliquera plusieurs styles à l'élément div à l'aide de la propriété style. La couleur du texte est définie sur bleu, la taille de police sur 18 pixels, et une marge de 10 pixels est ajoutée.
Manipulation de classes
La gestion des classes est un moyen puissant d'appliquer des styles aux éléments de manière modulaire et réutilisable. La propriété classList fournit des méthodes pour ajouter, supprimer, basculer et vérifier des classes sur un élément. Pour des manipulations plus avancées, classList.replace() et classList.item() sont également disponibles.
Ajout de classes
La méthode add() ajoute une ou plusieurs classes à un élément.
Exemple
<div id="addClassExample">This element will have classes added.</div>
<button onclick="addClass()">Add Class</button>
<script>
function addClass() {
const element = document.getElementById('addClassExample');
element.classList.add('highlight', 'text-large');
}
</script>
<style>
.highlight {
background-color: yellow;
}
.text-large {
font-size: 24px;
}
</style>Dans cet exemple, le clic sur le bouton ajoutera les classes highlight et text-large à l'élément div, appliquant ainsi les styles correspondants.
Suppression de classes
La méthode remove() supprime une ou plusieurs classes d'un élément.
Exemple
<div id="removeClassExample" class="highlight text-large">
This element will have classes removed.
</div>
<button onclick="removeClass()">Remove Class</button>
<script>
function removeClass() {
const element = document.getElementById('removeClassExample');
element.classList.remove('highlight', 'text-large');
}
</script>
<style>
.highlight {
background-color: yellow;
}
.text-large {
font-size: 24px;
}
</style>Ici, le clic sur le bouton supprimera les classes highlight et text-large de l'élément div.
Basculer des classes
La méthode toggle() ajoute une classe si elle n'est pas présente et la supprime si elle l'est.
Exemple
<div id="toggleClassExample">Click me to toggle the highlight class.</div>
<button onclick="toggleClass()">Toggle Class</button>
<script>
function toggleClass() {
const element = document.getElementById('toggleClassExample');
element.classList.toggle('highlight');
}
</script>
<style>
.highlight {
background-color: yellow;
}
.text-large {
font-size: 24px;
}
</style>Dans cet exemple, le clic sur le bouton basculera la classe highlight sur et hors de l'élément div.
Vérification de classes
La méthode contains() vérifie si un élément possède une classe spécifique.
Exemple
<div id="containsClassExample" class="highlight">
This element's classes will be checked.
</div>
<button onclick="checkClass()">Check Class</button>
<script>
function checkClass() {
const element = document.getElementById('containsClassExample');
if (element.classList.contains('highlight')) {
alert('The element has the highlight class.');
} else {
alert('The element does not have the highlight class.');
}
}
</script>
<style>
.highlight {
background-color: yellow;
}
.text-large {
font-size: 24px;
}
</style>Ici, le clic sur le bouton vérifiera si l'élément containsClassExample possède la classe highlight et affichera une alerte en conséquence.
Exemple concret : Liste de tâches interactive
Pour illustrer ces concepts dans un scénario réel, créons une simple application de liste de tâches interactive où nous pouvons ajouter et supprimer des tâches, et appliquer dynamiquement des styles pour indiquer les tâches terminées.
<div>
<h2>To-Do List</h2>
<p>Here, you can add new items, and mark it as completed by clicking on them.</p>
<input type="text" id="newTask" placeholder="Add a new task" />
<button id="addTaskButton">Add Task</button>
<ul id="taskList"></ul>
</div>
<script>
const newTaskInput = document.getElementById('newTask');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');
addTaskButton.addEventListener('click', () => {
const taskText = newTaskInput.value;
if (taskText) {
const taskItem = document.createElement('li');
taskItem.textContent = taskText;
taskItem.classList.add('task');
taskItem.addEventListener('click', () => {
taskItem.classList.toggle('completed');
});
taskList.appendChild(taskItem);
newTaskInput.value = '';
}
});
</script>
<style>
.task {
cursor: pointer;
padding: 5px;
border-bottom: 1px solid #ccc;
}
.task.completed {
text-decoration: line-through;
color: gray;
}
</style>Dans cet exemple, nous créons une application de liste de tâches où les tâches peuvent être ajoutées et marquées comme terminées en cliquant dessus. La classe task style les tâches, tandis que la classe completed, appliquée à l'aide de la méthode toggle(), indique les tâches terminées.
Bonnes pratiques
Pour garantir un code efficace et maintenable lors de la manipulation des styles dans le DOM, considérez les bonnes pratiques suivantes :
- Séparation des responsabilités : Gardez votre HTML, CSS et JavaScript séparés. Utilisez JavaScript pour manipuler des classes plutôt que de définir des styles directement chaque fois que cela est possible. Cette approche maintient la séparation des responsabilités et facilite la gestion de votre code.
- Évitez les styles en ligne : Utilisez les styles en ligne avec parcimonie. Les styles en ligne peuvent encombrer votre HTML et le rendre plus difficile à maintenir. Préférez plutôt l'ajout et la suppression de classes définies dans votre CSS.
- Utilisez des classes pour la réutilisabilité : Définissez des classes réutilisables dans votre CSS et utilisez JavaScript pour basculer ces classes. Cette approche permet un style plus cohérent dans toute votre application et facilite la mise à jour des styles.
- Exploitez les méthodes
classList: Utilisez les méthodesclassList(add,remove,toggle,contains) pour gérer les classes efficacement. Ces méthodes sont simples et performantes par rapport à la manipulation directe de la propriétéclassName. - Considérations de performance : Soyez attentif à la performance lors de la manipulation du DOM. Regroupez les modifications de style pour minimiser les reflows et les repaints, ce qui peut impacter les performances, en particulier dans les applications complexes ou volumineuses.
INFO
Utilisez les transitions et animations CSS pour des effets visuels plus fluides au lieu d'animations basées sur JavaScript, qui peuvent être plus performantes et plus faciles à gérer.
Conclusion
Comprendre et manipuler les styles dans le DOM est essentiel pour créer des applications web dynamiques et interactives. En utilisant des styles en ligne, la propriété style et les méthodes de manipulation de classes fournies par la propriété classList, vous pouvez obtenir une grande variété d'effets de style et améliorer l'expérience utilisateur sur votre site web.
Pratique
Parmi les méthodes classList suivantes, laquelle est utilisée pour ajouter une ou plusieurs classes à un élément ?