JavaScript tiene que ver con cosas dinámicas y lidiar con cambios dinámicos de CSS es solo uno de los escenarios en los que JavaScript es exactamente lo que necesitamos.
Con JavaScript, podemos establecer estilos CSS para uno o varios elementos en el DOM, modificarlos, eliminarlos o incluso cambiar la hoja de estilo completa para toda su página.
Veamos las diferentes formas en que podemos lograr esto:
1. Cambiar las propiedades en línea de CSS con JavaScript
Establecer estilos individuales directamente desde JavaScript es uno de los escenarios más comunes cuando se trata de estilos CSS dinámicos.
De esta manera, le permite cambiar los estilos CSS para uno o varios elementos presentes en el DOM.
Todo lo que tienes que hacer es:
- Consulta el elemento presente en el DOM.
- Y configure el estilo o los estilos uno por uno.
const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';Tenga en cuenta que al configurar los estilos CSS utilizando la propiedad de estilo, debe escribir las propiedades CSS en camelcase. En lugar de usar un guión, para separar las palabras, deberá escribir en mayúsculas la primera letra de cada palabra. (color de fondo, tamaño de fuente)
Si ejecuta este código así, notará que el cambio se lleva a cabo al cargar la página.
Si desea cambiar los estilos CSS dinámicamente, deberá adjuntar esta parte del código a algún evento.
Por ejemplo, si desea cambiar los estilos de su elemento al hacer clic en un botón, primero debe escuchar el evento de clic y adjuntar una función que contenga el código anterior.
Aquí hay un ejemplo:
const button = document.querySelector('button');
button.addEventListener('click', () => {
const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';
});Tenga en cuenta que cuando aplica estilos específicos usando JavaScript, estos estilos tienen prioridad sobre los estilos aplicados externamente en una hoja de estilo e incluso sobre los aplicados en línea, en el propio elemento HTML.
.demo{
color: red;
}
<div class="demo" style="color: blue;">Demo</div>
En este caso, por ejemplo, tenemos un elemento con un estilo en línea dotándolo de un fondo amarillo.
Si ahora establecemos la propiedad de color CSS en verde usando JavaScript, nuestro elemento obtendrá un color verde. Sobrescribirá el estilo en línea y el estilo aplicado en la hoja de estilo CSS externa.
2. Establecer múltiples estilos CSS al mismo tiempo
Imagina que tienes que aplicar, digamos 5 o 10 estilos para un solo elemento.
Puedes ir uno por uno y tener algo como lo siguiente:
element.style.display = 'block';
element.style.width = '100px';
element.style.backgroundColor = 'red';
element.style.border = '2px';
element.style.fontSize = '12px';
element.style.color = 'white';
element.style.margin = '20px';
element.style.paddingLeft = '10px';
element.style.paddingBottom = '10px';
element.style.lineHeight = '13px';
Pero tal vez esté buscando una forma “más inteligente” de cambiarlos a todos al mismo tiempo sin tanta repetición de código.
Si ese es el caso, ¡tengo buenas noticias para ti!
De hecho, puede pasar un valor de cadena a la propiedad cssText para establecer varios estilos CSS a la vez.
Aún mejor, podemos usar literales de plantilla tipo de cadenas para mantenerlos separados en diferentes líneas como lo hace en sus hojas de estilo.
const myStyles = `
display: block;
width: 80%;
background-color: red;
border: 2px;
font-size: 5em;
color: white;
margin: 20px;
padding-left: 10px;
padding-bottom: 10px;
border: 2px solid black;
`;
const element = document.querySelector('.demo');element.style.cssText = myStyles;
Si se está iniciando en JavaScript, es posible que desee consultar nuestra lista con los mejores libros para aprender JavaScript o cuál es la mejor manera de aprender JavaScript.
2. Cambiar la clase CSS en JavaScript
<div class="demo">Hello</div>
const element = document.querySelector('.demo');
element.classList.add('new-class');
.new-class{
background: red;
}De la misma manera, también puede eliminar ciertas clases usando classList.remove o incluso alternarlas cuando usa classList.toggle.
Aquí hay un ejemplo:
const element = document.querySelector('.demo');
element.classList.removeClass('.new-class');
const element = document.querySelector('.demo');
element.classList.toggleClass('.new-class');
3. Cambia las hojas de estilo CSS dinámicamente
Digamos que ahora no desea agregar estilos en línea a un elemento o aplicarle una clase. En su lugar, desea aplicar un cambio en el nivel de la hoja de estilo. ¿Por qué?
Hay un par de razones:
Es posible que desee aplicar el cambio a todos los elementos con un selector determinado. Pero no solo a los elementos presentes ahora mismo en el HTML, sino también a todos los futuros que se agregarán dinámicamente más adelante.
Puede haber una gran cantidad de elementos que comparten el selector al que desea aplicar cambios. Imagina 500 elementos compartiendo tu selector, o incluso 1K, 5K, 10K. Tener que seleccionar todos esos elementos usando JavaScript y luego recorrerlos para cambiar su estilo (o agregar una clase) será EXTREMADAMENTE lento.
aquí es donde modificando la hoja de estilo CSS directamente será útil.
Puede seleccionar las hojas de estilo de un documento utilizando document.styleSheets. Si sabe que la hoja de estilo que desea modificar es la segunda, puede obtenerla utilizando document.styleSheets[2].
Luego, recorrería todas sus reglas y obtendría la que necesita modificar. En este caso, si desea modificar la clase .element, puede comparar cada uno de los selectores de reglas con .element.
Aquí está el código:
const stylesheet = document.styleSheets[2];
let elementRules;
for(let i = 0; i < stylesheet.cssRules.length; i++) {
if(stylesheet.cssRules[i].selectorText === '.element') {
elementRules = stylesheet.cssRules[i];
}
}
elementRules.style.setProperty('background', 'blue');
Y aquí está el ejemplo de Codepen con el que puedes jugar:
4. Agregar y eliminar hojas de estilo CSS dinámicamente
En algunos casos, es posible que deseemos agregar una hoja de estilo completamente nueva o incluso reemplazar una existente.
La razón de esto podría ser:
Tiene una aplicación web que admite múltiples temas y permite al usuario cambiarlos dinámicamente.
Es posible que desee empaquetar un componente en un solo archivo JS en lugar de tener que incluir ambos archivos, el JS y el CSS.
La forma en que esto funciona es bastante simple:
- 1- Escribimos el contenido de nuestra nueva hoja de estilo usando literales de plantilla.
- 2- Seleccionamos el elemento de cabecera de la página para anexar nuestra nueva hoja de estilos.
- 3- Creamos un elemento de hoja de estilo usando document.createElement(“style”)
- 4- Agregamos el contenido de nuestra hoja de estilo al nuevo elemento de estilo usando document.createTextNode y appendChild.
Aquí está el código:
const button = document.querySelector("button");
const styleSheetContent = `
.demo{
background:red;
}
`;
button.addEventListener("click", () => {
appendStyleSheet("demo", styleSheetContent);
});
function appendStyleSheet(id, content) {
if (!document.querySelector("#" + id)) {
var head = document.head || document.getElementsByTagName("head")[0];
console.log(head);
head.appendChild(createStyleElement(id, content));
}
}
function createStyleElement(id, content) {
var style = document.createElement("style");
style.type = "text/css";
style.id = id;
if (style.styleSheet) {
style.styleSheet.cssText = content;
} else {
style.appendChild(document.createTextNode(content));
}
return style;
}
Y aquí está el ejemplo de Codepen para que pueda probarlo usted mismo y modificar algunas cosas según sus necesidades:
5. ¡Sobrescriba CSS! estilo importante con JavaScript
Todos conocemos la regla: “Evite usar !importante”. ¡Pero hey! A veces es realmente necesario o simplemente está fuera de nuestro control.
La propiedad de prioridad importante asegura que dicho estilo sobrescribirá cualquier estilo declarado en línea (escrito en el propio elemento HTML), así como cualquier regla declarada previamente que se aplique a su elemento.
Entonces… ¿qué pasa si necesitamos sobrescribir el estilo que se declaró previamente usando !important?
Imagina que tenemos nuestro elemento:
<div class="demo">Demo</div>
Y la hoja de estilo usando la regla !importante así:
.demo{
background-color: yellow !important;
}Todo lo que tienes que hacer es aplicar el parámetro de prioridad en la función setProperty que nos proporciona JavaScript:
el.style.setProperty(property, value, priority);
Aquí hay un ejemplo:
var el = document.querySelector('.demo');
el.style.setProperty('background-color', 'red', 'important');Observe cómo cuando usamos setProperty especificamos las propiedades CSS exactamente de la misma manera que lo hacemos en nuestra hoja de estilo. Usando un guión – para separar las palabras. (color de fondo, tamaño de fuente)
