Cómo cambiar las variables CSS a través de JavaScript?

Las variables CSS son propiedades personalizadas generadas por el desarrollador y consisten en un nombre y valor particular. La ventaja de usar estas variables es que una vez declarado que se pueden usar en cualquier otro lugar del documento y le impide escribir valores de CSS redundantes una y otra vez.

Sin embargo, a veces en ciertos escenarios, como al diseñar un sitio web receptivo, o obtener ciertos datos de la base de datos, requeriría obtener o actualizar valores de ciertas variables CSS. Por lo tanto, esto se puede hacer utilizando el método JavaScript getComputedStyle () y el método setProperty ().

A continuación, hemos demostrado con la ayuda de un ejemplo de cómo cambiar las variables CSS usando JavaScript.

Cómo cambiar las variables CSS a través de JavaScript

Con el propósito de comprender cómo cambiar una variable CSS usando JavaScript, consideremos un ejemplo.

Html

Este es un párrafo.

Obtener familia de fuentes
Familia de fuentes establecida

Estamos creando un

Elemento para aplicarle algo de estilo utilizando variables CSS y luego crear dos botones para obtener y establecer variables CSS usando JavaScript.

CSS

Ahora, en primer lugar, estamos creando algunas variables globales en: selector de raíz y proporcionándoles algunos valores.

:raíz
--Font-Family: Times New Roman;
--tamaño de fuente: 30px;

Ahora para usar estas variables en el párrafo, siga el fragmento de código a continuación.

pag
color marrón;
Font-Family: Var (-Font-Family);
Font-size: var (-font-size);

En el código anterior, estamos dando al párrafo algo de color y utilizando la función var (), estamos accediendo a nuestras variables CSS para proporcionar un tamaño de familia y fuente de fuentes al párrafo.

Ahora, queremos actualizar los valores de las variables CSS usando JavaScript. Así es como lo haces. En el siguiente código, básicamente estamos obteniendo, así como actualizando el valor de la variable -family -family.

Js

VAR Store = documento.QuerySelector (': root');
función getFontFamily ()
value var = getComputedStyle (tienda);
alerta ("Familia inicial de fuentes:"+ valor.GetPropertyValue ('-Font-Family'));

función setFontFamily ()
almacenar.estilo.setProperty ('-Font-Family', 'Verdana');

En el código anterior, estamos creando una variable con el nombre "almacenar" para almacenar todas las variables CSS declaradas en: selector de raíz utilizando el método QuerySelector ().

Luego estamos generando una función "getFontfamily" para obtener las variables que se guardaron inicialmente en la variable "almacenamiento" utilizando el método getComputedStyle (), y luego estamos utilizando la función alert () para mostrar el valor inicial de la variable correspondiente a la familia de fuentes.

Por último, nuevamente estamos generando otra función "setFontFamily ()" para establecer el nuevo valor de la variable -font -Family usando el método setProperty ().

Producción

Así es como se ve inicialmente nuestra página web.

Haga clic en el botón Get para obtener el valor de la familia de fuentes originales.

Después de hacer clic.

La familia de fuentes iniciales es tiempos New Roman.

Para actualizar la familia de fuentes, haga clic en el botón Establecer.

Después de hacer clic en el botón.

La variable -family -family se ha actualizado con éxito a "Verdana".

Conclusión

Con el fin de obtener o actualizar los valores de ciertas variables CSS a través de JavaScript, hay dos métodos disponibles. El primero es el método getComputedStyle () para obtener el valor de una variable, mientras tanto, para actualizar el valor de una variable utilizando el método setProperty (). Cambiar las variables CSS a través de JavaScript es útil en escenarios como al diseñar un sitio web receptivo o obtener ciertos datos de la base de datos. Este tutorial analiza cómo cambiar estas variables a través de JavaScript con la ayuda de un ejemplo adecuado.