logo

Cómo configurar estilos CSS usando JavaScript

En mi artículo anterior, analizamos diferentes formas de obtener información de estilo de un elemento HTML usando JavaScript estándar. Hoy aprenderá cómo aplicar estilos CSS a un elemento con JavaScript.

Digamos que tenemos el siguiente <div> elemento:

<div class="pizza">Hot, spicy, pizza 🍕</div>

Ahora queremos cambiar el texto y los colores de fondo, y las propiedades CSS del estilo de fuente usando JavaScript. ¿Qué debemos hacer? Hay múltiples opciones disponibles en JavaScript.

Estilos en línea

La forma más sencilla y sencilla de cambiar los estilos CSS de un elemento con JavaScript es mediante la propiedad de estilo DOM.

Todo lo que necesita hacer es obtener el elemento de DOM y cambiar sus estilos en línea:

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

// change text color to white
pizza.style.color = 'white';

// set background color to blue
pizza.style.backgroundColor = 'blue';

// change font style to italic
pizza.style.fontStyle = 'italic';

El style La propiedad utiliza las convenciones de nomenclatura de mayúsculas y minúsculas para las propiedades CSS y aplica estilos en línea al elemento:

<div class="pizza" style="color: white; background-color: blue; font-style: italic;">Hot, spicy, pizza 🍕</div>

Estilos globales

Otra forma es crear un <style> elemento, inyecte sus propiedades CSS y agréguelo al DOM. Esta opción es especialmente útil si desea aplicar estilos a varios elementos en lugar de solo uno.

Primero, creemos un <style> elemento:

const style = document.createElement('style');

Luego, agregue los estilos CSS a la etiqueta anterior usando innerHTML :

style.innerHTML = `
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`;

Finalmente, agregue el elemento de estilo al DOM. Para hacer esto, obtenga el <head> etiqueta usando document.head y luego llamar al appendChild() en él para agregar el elemento de estilo:

document.head.appendChild(style);

Aquí está el fragmento de código JavaScript completo:

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

// add CSS styles
style.innerHTML = `
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`;

// append to DOM
document.head.appendChild(style);

Modelo de objetos CSS (CSSOM) InsertRule()

Según MDN:

El CSSStyleSheet.insertRule() El método inserta una nueva regla CSS en una hoja de estilo. Así es como puede usar este método para agregar estilos al elemento HTML anterior:

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

// append to DOM
document.head.appendChild(style);


// insert CSS Rule
style.sheet.insertRule(`
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`);

No es no realmente necesario para crear un nuevo <style> elemento. Puede usar el <style> existente elementos así como hojas de estilo externas para agregar reglas CSS usando insertRule() .

El insertRule() El método funciona en todos los navegadores modernos, incluido Internet Explorer 9 y superior.

Hojas de estilo construibles

Las hojas de estilo construibles son una forma moderna de crear y distribuir estilos reutilizables cuando se trabaja con Shadow DOM.

Aquí hay un ejemplo que crea hojas de estilo construibles y las agrega a Shadow DOM:

// create a new shared stylesheet
const sheet = new CSSStyleSheet();

// add CSS styles
sheet.replaceSync(`
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`);

// apply stylesheet to a document
document.adoptedStyleSheets = [sheet];

Conclusión

En este artículo, analizamos cuatro formas diferentes de agregar estilos CSS a un elemento HTML en JavaScript.

Entonces, ¿qué método deberías usar? Depende de lo que quieras lograr cambiando dinámicamente el CSS.

Si solo desea modificar los estilos CSS para un simple elemento, es mejor usar la propiedad de estilo. Esta propiedad cambia los estilos en línea solo para un elemento específico, sin afectar los estilos globales.

Si desea aplicar un estilo a un conjunto de elementos HTML, simplemente cree un nuevo <style> etiqueta con las propiedades CSS necesarias y añádela al documento.

Leer a continuación: Cómo agregar múltiples estilos CSS usando JavaScript