Comment puis-je accéder aux variables CSS à l'aide de JavaScript ?

Accès aux variables CSS en JavaScript

Les variables CSS sont un outil puissant pour stocker des informations de style dans vos fichiers CSS. Ils sont accessibles depuis JavaScript, vous donnant la possibilité de mettre à jour dynamiquement l'apparence de votre application Web.

Pour accéder à une variable CSS depuis JavaScript, vous pouvez utiliser la méthode getComputedStyle() pour récupérer les styles calculés d'un élément puis utilisez la méthode getPropertyValue() pour obtenir la valeur de la propriété souhaitée.

Par exemple, si vous avez la variable CSS suivante déclaration :

:root {
  --color-font-general: #336699;
}

Vous pouvez accéder à la valeur de cette variable en JavaScript en utilisant le code suivant :

getComputedStyle(element).getPropertyValue('--color-font-general');

Cela renverra la valeur du CSS --color-font-general variable sous forme de chaîne. Vous pouvez ensuite utiliser cette valeur pour ajuster dynamiquement l'apparence de votre application Web, par exemple en définissant la couleur des éléments de texte.

Voici un exemple d'utilisation de cette technique pour changer la couleur de tous les éléments de texte. dans un document :

var elements = document.getElementsByTagName('p');
for (var i = 0, element; element = elements[i++];) {
  element.style.color = getComputedStyle(element).getPropertyValue('--color-font-general');
}

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!