Pasar al contenido principal

🔥 ¡Hoy clase gratis y en vivo! Crea tu propio CMS con PHP junto a Yesi Days. Regístrate. Comenzamos en: --:---:---:---

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Manipular estilos de un pseudoelemento con JavaScript

Los pseudoelementos no son accesibles por JavaScript porque no son parte del DOM, pero con este truco podrás manipular sus estilos.

Portada

Los pseudoelementos ::before y ::after son generados por CSS, eso quiere decir que no existen en el DOM, pero hoy te mostraré un truco para manipular los estilos de dichos pseudoelementos con JavaScript.

Variables CSS

Por si no estabas enterado, las variables CSS ya son una realidad, pero, ¿qué tienen que ver en este caso? Las variables CSS, a diferencia de los pseudoelementos, sí son accesibles por JavaScript a través de la siguiente instrucción:

/*
* element => Elemento al que queremos acceder. En este caso el elemento que genere el pseudoelemento
* propertyName => La propiedad que queremos cambiar. En este caso la variable css
* value => nuevo valor por asignar
*/

element.style.setProperty(propertyName, value)

Recuerda que las variables CSS son en realidad propiedades CSS, por lo tanto, son heredadas por los descendientes (hijos, nietos, etc). Además, por teoría, un elemento que genera un pseudoelemento pasa a ser padre de éste último, por lo que al declarar una variable en un elemento, sus hijos (incluyendo los pseudoelementos) tienen acceso a dicha variable. Basados en este principio, pasemos a la parte práctica:

HTML

<button class="button center" id="button">Cambiar valor de la variable</button>
<div class="container" id="container"></div>

CSS

.container {
    --bg-pseudo     : hsl(20, 90%, 60%); /* Variable que almacena el color de fondo del pseudoelemento */
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 50px;
    height          : 50px;
    margin          : 0 auto;
    background      : hsl(240, 70%, 60%);
}

.container::before {
    content    : '';
    display    : block;
    width      : 20px;
    height     : 20px;
    background : var(--bg-pseudo);
}

Para este ejercicio declaramos la variable --bg-pseudo que está destinada a ser el fondo del pseudoelemento. Supongamos que queremos cambian el código del color de esa variable, entonces hacemos lo siguiente:

JS

// Obtenemos el contenedor padre y el botón para poder detectar el click
let container = document.getElementById('container'),
    button    = document.getElementById('button')

// Creamos evento click para cambiar el color
button.addEventListener('click', () => {
    container.style.setProperty('--bg-pseudo', 'hsl(100, 90%, 60%)')
})

Resultado

 

Asombroso, ¿no lo crees? Pero ahí no acaba la cosa, podemos obtener el mismo resultado reasignando el valor de la variable mediante clases en CSS y JS sólo se encargará de manipular clases y no estilos. Veamos cómo logarlo utilizando el ejemplo anterior, pero de forma más divertida que consiste en obtener colores aleatorios previamente declarados:

HTML


<button class="button center" id="button">Cambiar valor de la variable</button>
<div class="container" id="container"></div>

CSS

.container {
    --bg-pseudo : hsl(127, 100%, 50%); /* Colocamos un color por defecto */
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 50px;
    height          : 50px;
    margin          : 0 auto;
    background      : hsl(240, 70%, 60%);
}

/* Clases que asignan el color a la variable */
.container.green {
    --bg-pseudo : hsl(127, 100%, 50%);
}

.container.red {
    --bg-pseudo : hsl(0, 100%, 54%);
}

.container.orange {
    --bg-pseudo : hsl(23, 100%, 54%);
}

.container.yellow {
    --bg-pseudo : hsl(50, 100%, 54%);
}

.container::before {
    content    : '';
    display    : block;
    width      : 20px;
    height     : 20px;
    background : var(--bg-pseudo);
}

JS

let container  = document.getElementById('container'),
    button     = document.getElementById('button'),
    // Arreglo que contiene el nombre de las clases que reasignan el valor de la variable CSS
    colorClass = ['green', 'red', 'orange', 'yellow']
   
// Función para obtener un color aleatorio del arreglo   
const getColorClass = () => {
  let random = Math.round(Math.random() * (colorClass.length - 1))
  return colorClass[random]
}

// Asignamos el color aleatorio a la viaable
button.addEventListener('click', () => {
  colorClass.map(color => container.classList.remove(color))
  container.classList.add(getColorClass())
})

Resultado

 

Para este momento, manipular los estilos de un pseudoelemento no te volverá a provocar dolores de cabeza. Aprovecho para recordarte que EDteam tiene un curso de Variables CSS ¡Totalmente gratis!

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal