Comment changer les variables CSS via JavaScript?

Les variables CSS sont des propriétés personnalisées générées par le développeur et se composent d'un nom et d'une valeur particuliers. L'avantage de l'utilisation de ces variables est qu'une fois déclarée, celles-ci peuvent être utilisées ailleurs dans le document et vous empêche d'écrire des valeurs CSS redondantes encore et encore.

Cependant, parfois dans certains scénarios, comme lors de la conception d'un site Web réactif, ou de récupérer certaines données de la base de données, vous auriez besoin soit de récupérer, soit de mettre à jour les valeurs de certaines variables CSS. Par conséquent, cela peut être fait en utilisant la méthode JavaScript getCompuledStyle () et la méthode setProperty ().

Ci-dessous, nous avons démontré à l'aide d'un exemple comment modifier les variables CSS à l'aide de JavaScript.

Comment changer les variables CSS via JavaScript

Dans le but de comprendre comment modifier une variable CSS à l'aide de JavaScript, considérons un exemple.

Html

C'est un paragraphe.

Obtenez la famille des polices
Fixer la famille des polices

Nous créons un

élément pour y appliquer un style à l'aide de variables CSS, puis créer deux boutons pour obtenir et définir les variables CSS à l'aide de JavaScript.

CSS

Maintenant tout d'abord, nous créons des variables globales dans le: sélecteur de racines et leur fournissant certaines valeurs.

:racine
--Font-Family: Times New Roman;
--taille de police: 30px;

Maintenant, pour utiliser ces variables sur le paragraphe, suivez l'extrait de code ci-dessous.

p
couleur marron;
Font-Family: var (- Font-Family);
taille de police: var (- taille de police);

Dans le code ci-dessus, nous donnons au paragraphe une certaine couleur et en utilisant la fonction var (), nous accédons à nos variables CSS pour fournir une famille de polices et une taille de police au paragraphe.

Maintenant, nous voulons mettre à jour les valeurs des variables CSS à l'aide de JavaScript. Voici comment tu fais. Dans le code ci-dessous, nous allons essentiellement chercher ainsi que la mise à jour de la valeur de la variable de la famille de la famille.

Js

Var Store = Document.queySelector (': root');
fonction getFontFamily ()
Var Value = GetCompuledStyle (magasin);
alerte ("Famille de polices initiale:" + valeur.getPropertyValue ('- Font-Family'));

fonction setfontfamily ()
magasin.style.SetProperty ('- Font-Family', 'Verdana');

Dans le code ci-dessus, nous créons une variable du nom «Store» pour stocker toutes les variables CSS déclarées dans le: Sélecteur de racine à l'aide de la méthode Queryselector ().

Nous générons ensuite une fonction «getFontFamily» pour récupérer les variables qui ont été initialement enregistrées dans la variable «Store» en utilisant la méthode GetCompuledStyle (), et ensuite nous utilisons la fonction alert () pour afficher la valeur initiale de la variable correspondant à La famille des polices.

Enfin, nous générons à nouveau une autre fonction «setFontFamily ()» pour définir la nouvelle valeur de la variable -font-famille à l'aide de la méthode setProperty ().

Sortir

C'est à quoi ressemble notre page Web initiale.

Cliquez sur le bouton Get pour récupérer la valeur de la famille d'origine.

Après avoir cliqué.

La famille initiale de la police est un temps nouveau Roman.

Pour mettre à jour le Font-Family, cliquez sur le bouton définir.

Une fois le bouton cliqué.

La variable -font-family a été mise à jour avec succès à «Verdana».

Conclusion

Aux fins de la récupération ou de la mise à jour des valeurs de certaines variables CSS via JavaScript, il existe deux méthodes disponibles. Le premier est la méthode getCompuledStyle () pour récupérer la valeur d'une variable, en attendant, pour mettre à jour la valeur d'une variable à l'aide de la méthode SetProperty (). La modification des variables CSS via JavaScript est utile dans des scénarios tels que lors de la conception d'un site Web réactif ou de la récupération de certaines données de la base de données. Ce tutoriel explique comment changer ces variables via JavaScript à l'aide d'un exemple approprié.