Header Ads Widget

Ticker

6/recent/ticker-posts

Acceder / actualizar variables CSS con JavaScript

 Las variables CSS (o propiedades personalizadas) son poderosas adiciones a CSS. Entre otras características, le permiten actualizar en vivo el DOM en JavaScript. La actualización dinámica de las variables CSS facilitará la creación de requisitos avanzados, como temas dinámicos y en vivo.

Veamos, con un simple ejemplo, cómo podemos actualizar dinámicamente los colores de una página.

Primero, creemos una página HTML con el siguiente código:

<button  onclick="changeDocColor()">Change color</button>

El setProperty()método aceptará cualquier código CSS válido, la cadena de valor también puede incluir la función var (). ¿Eso nos permitiría predefinir nuestro color antes de usarlo, para quizás reutilizarlo en otro lugar?

:root { --bg-color: blue; }

:rootes una pseudoclase CSS que selecciona (o empareja) el elemento raíz de un documento. En el caso de HTML, se :rootrefiere al <html>elemento, es decir, usarlo equivale a usar el htmlselector pero tiene una mayor especificidad.

Al agregar las variables CSS dentro del :rootselector, las hacemos disponibles en el alcance global del documento para que sean accesibles desde cualquier otro elemento.

Usamos --para definir una propiedad personalizada de CSS.

function changeBackgroundColor() {
    elem.style.setProperty('--bg-color', 'red');
}

Entendamos el código:

4 — grab footer element
5 — grab NodeList of all inputs on the page
7 — input CHANGE EventListener
8 — input MOUSEMOVE EventListener(updates dynamic margin on slide)
10 — fn to set the value of the desired CSS var(note we add px to the margin var on line 14)

Publicar un comentario

0 Comentarios