Maison >interface Web >tutoriel CSS >Comment puis-je ajouter et appliquer dynamiquement des classes CSS en JavaScript ?

Comment puis-je ajouter et appliquer dynamiquement des classes CSS en JavaScript ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-22 10:51:11782parcourir

How Can I Dynamically Add and Apply CSS Classes in JavaScript?

Création et application de classes CSS dynamiques en JavaScript

Lorsque vous travaillez avec des applications Web complexes, il devient nécessaire d'ajouter des classes CSS personnalisées aux éléments HTML et contrôle dynamiquement. Cela permet une flexibilité et une maintenabilité accrues du code.

Solution :

Oui, il est possible de créer et d'appliquer des classes CSS de manière dynamique en JavaScript. Voici un exemple qui montre comment :

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #f00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';
<div>

Explication :

  1. Création de la classe CSS :

    • Nous créons un nouveau