Comment puis-je modifier dynamiquement les valeurs des propriétés de classe CSS à l'aide de JavaScript ?

Modification dynamique des valeurs des propriétés de classe CSS à l'aide de JavaScript / jQuery

Vous avez rencontré une situation dans laquelle vous souhaitez attribuer dynamiquement une valeur à un CSS style, en particulier pour une propriété de classe qui affecte plusieurs éléments dans un diaporama. Cela nécessite de modifier directement la feuille de style CSS, plutôt que de simplement ajuster les attributs des éléments.

Utilisation d'une bibliothèque d'édition CSS

Bien que certains puissent suggérer le contraire, il est possible et efficace de modifier les feuilles de style CSS avec JavaScript. Une approche recommandée consiste à utiliser la bibliothèque jss.

import jss from 'jss';

const stylesheet = jss.createStyleSheet({
  myClass: {
    fontSize: '2rem',
  },
});

Modification d'un seul élément

Pour modifier les valeurs des propriétés de classe CSS pour un élément spécifique, ciblez-le avec un sélecteur de requête et utilisez la méthode Rule().

const element = document.querySelector('.myClass');
stylesheet.rule('.myClass').style({
  color: 'red',
});

Modification de plusieurs éléments simultanément

Pour modifier les valeurs des propriétés de classe CSS pour tous les éléments d'un groupe, parcourez-les en utilisant le nom de la classe et la méthode apply().

const elements = document.querySelectorAll('.myClass');
stylesheet.rule('.myClass').unfolded().apply(elements);

En utilisant une bibliothèque d'édition CSS et en employant des techniques efficaces, vous pouvez modifier dynamiquement les valeurs des propriétés de classe CSS à la volée avec JavaScript, éliminant ainsi le vous devez spécifier des valeurs de propriété individuelles pour chaque élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!