logo

Cómo agregar múltiples estilos CSS usando JavaScript

En mi artículo anterior, analizamos diferentes formas de establecer estilos CSS en un elemento usando JavaScript estándar. En este artículo, aprenderá sobre otra cosa interesante:agregar varios estilos CSS a la vez a un elemento con JavaScript.

Agregar múltiples estilos en línea

La propiedad de estilo DOM es la forma más sencilla de establecer y obtener estilos CSS de un elemento en JavaScript.

Por lo general, cuando desea agregar varias propiedades CSS a un elemento, debe configurarlas individualmente como se muestra a continuación:

const btn = document.querySelector('.btn');

// set inline CSS styles
btn.style.width = '150px';
btn.style.height = '40px';
btn.style.color = 'blue';

Sin embargo, este enfoque no muy flexible. Si decide realizar modificaciones en el futuro, debe actualizar el código en más de una ubicación.

Una forma de resolver este problema es usando el cssText atributo proporcionado por el style propiedad como se muestra a continuación:

btn.style.cssText = 'width: 150px; height: 40px; color: blue';

El código de ejemplo anterior debería funcionar perfectamente. Sin embargo, el único inconveniente es que sobrescribe todos los demás estilos en línea aplicados al elemento.

Otra forma de aplicar varios estilos CSS de inmediato es usar el Object.assign() función:

const btn = document.querySelector('.btn');

// create styles object
const styles = {
    width: '150px',
    height: '40px',
    color: 'white',
    backgroundColor: 'black'
};

// apply styles to the button
Object.assign(btn.style, styles);

El código anterior es más legible y fácil de mantener. También Object.assign() no sobrescribe todos los estilos en línea existentes. En su lugar, solo actualizará aquellas propiedades que coincidan con las claves en el styles objeto.

Agregar múltiples estilos globales

Ya discutí tres métodos diferentes para agregar múltiples estilos globales en el artículo anterior; <style> elemento, insertRule() de CSSOM y hojas de estilo construibles.

La forma simple es simplemente crear un nuevo <style> elemento, agregue sus propiedades CSS usando innerHTML y añádelo al DOM:

// create style element
const style = document.createElement('style');

// add CSS styles
style.innerHTML = `
    .btn {
        color: white;
        background-color: black;
        width: 150px;
        height: 40px;
    }
`;

// append the style to the DOM in <head> section
document.head.appendChild(style);

Alternativamente, también puede declarar todos los estilos CSS como una clase en un archivo CSS, como a continuación:

.btn {
    color: white;
    background-color: black;
    width: 150px;
    height: 40px;
}

Y luego, simplemente agregue la clase al elemento usando JavaScript:

const btn = document.querySelector('.btn');

// add CSS class
btn.classList.add('btn');

Eche un vistazo a esta guía para obtener más información sobre cómo configurar estilos CSS con JavaScript estándar.

El propósito de estos tutoriales no es desalentar el uso de clases CSS. Más bien, es solo para aprender cómo para manipular estilos CSS usando JavaScript. Siempre debe usar clases CSS siempre que sea posible. Sin embargo, es bueno conocer estos trucos mientras trabaja en proyectos en los que no tiene acceso a archivos CSS.