Comment puis-je accéder aux variables CSS en JavaScript ?

Accès aux variables CSS en JavaScript

Dans le développement Web, les variables CSS offrent un moyen pratique de stocker et de réutiliser les styles. Bien que ces variables puissent être définies et modifiées directement en CSS, vous devrez peut-être accéder à leurs valeurs en JavaScript.

L'accès aux variables CSS à partir de JavaScript est simple. Voici comment procéder :

Étape 1 : Obtenir les styles calculés

Pour obtenir les styles calculés actuels pour un élément, utilisez la fonction getComputedStyle. Cette fonction accepte un élément comme argument et renvoie ses styles calculés en tant qu'objet CSSStyleDeclaration.

var style = getComputedStyle(element);

Étape 2 : Obtenez la valeur de la variable

Une fois que vous avez le styles calculés, vous pouvez accéder à la valeur de n’importe quelle variable CSS à l’aide de la méthode getPropertyValue de l’objet CSSStyleDeclaration. La méthode getPropertyValue prend le nom de la variable comme argument.

var variableValue = style.getPropertyValue('variable-name');

Par exemple, pour accéder à la variable CSS --color-font-general dans l'exemple que vous avez fourni, vous écrivez :

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

La variable fontColor contiendra désormais la valeur de la variable CSS, qui dans ce cas est #336699.

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!