Cómo establecer el estilo usando JavaScript puro

Cuando los desarrolladores necesitan agregar animación o cambiar el estilo de cualquier elemento basado en interacciones de usuario u otros eventos dinámicos en la página web, puede ser más eficiente usar JavaScript para actualizar los estilos en lugar de usar CSS. JavaScript puede crear animaciones que serían difíciles o imposibles de lograr con CSS solo.

Este tutorial describirá el proceso de diseñar la página usando JavaScript.

Cómo establecer el estilo usando JavaScript puro?

Para peinar una página web con JavaScript, use los siguientes enfoques:

• Estilo en línea
• Estilo global

Método 1: Establecer estilo con JavaScript usando el estilo "en línea"

Para aplicar cualquier estilo en un solo elemento, use los siguientes enfoques:

• atributo de estilo
• método setattribute ()

Ejemplo 1: estilo en línea utilizando el atributo "estilo"

Primero, agregue un poco de contenido en la página:

Estilizarme usando un estilo en línea en JavaScript

La página web antes del estilo ahora parece lo siguiente:

Ahora, diseñe el texto usando JavaScript. Primero, obtenga la referencia del texto donde queremos agregar algo de estilo usando el "getElementById ()" método:

Dejar texto = documento.getElementById ("texto");

Cambie el color del texto usando el "estilo" atributo:

texto.estilo.color = "rojo";

Como puede ver, el texto ahora está en rojo:

Ejemplo 2: estilo en línea usando el método "setAttribute ()"

Aquí, usaremos el "setAttribute ()Método donde cambiaremos el color y el color de fondo del texto, y estableceremos el texto en el estilo en negrita:

texto.setAttribute ("estilo", "Color de fondo: gris; color: amarillo; fuente: en negrita");

Se puede observar que el color, el color de fondo y el estilo de fuente se han implementado con éxito en el texto:

Método 2: Establecer estilo con JavaScript utilizando el estilo "global"

Si desea agregar el mismo estilo en los diferentes elementos, use el "estilo global"Técnica. Establece estilos en múltiples elementos a la vez usando el "GetElementsByClassName () "," GetElementsBytagName () "o" QuerySelectorAll ()" métodos.

Ejemplo

En el archivo HTML, agregue algún texto en la página:

Estilo usando JavaScript

Estilizarme usando el estilo global en JavaScript

Estilizarme usando el estilo global en JavaScript

Contenido corporal

Producción

Ahora, diseñe la página utilizando el enfoque de estilo global. Primero, agregue un estilo para la etiqueta usando el "QuerySelector ()" método. Aquí, cambiaremos el color de fondo, la familia de fuentes y el color de texto y estableceremos el acolchado y el margen del cuerpo a '0' usando el "estilo" atributo:

constante de constante = documento.QuerySelector ("cuerpo");
cuerpo.estilo.backgroundColor = "LightBlue";
cuerpo.estilo.fontfamily = "arial, sans-serif";
cuerpo.estilo.color = "blanco";
cuerpo.estilo.margen = "0";
cuerpo.estilo.Padding = "0";

Como puede ver, todo el estilo dado se ha implementado con éxito en la página web:

Ahora, cambiaremos el color del encabezado y lo moveremos hacia abajo aplicando "marginto":

const h4 = documento.QuerySelector ("H4");
H4.estilo.color = "negro";
H4.estilo.margintop = "50px";

Puedes ver que el encabezado se mueve un poco hacia abajo, y el color es cambiar a "negro":

Ahora, cambie el color de texto del texto especificado que contiene el "textoClase "usando el"QuerySelectorAll ()" método:

Dejar elementos = documento.QuerySelectorall ('.texto');
elementos.foreach (function (elem)
elem.estilo.color = "azul";
);

Producción

Eso se trataba de estilo usando JavaScript puro.

Conclusión

Para peinar una página web con JavaScript, use el "Estilo en línea "o el" estilo global"Con la ayuda del"Atributo de estilo "," setAttribute ()" método, "getElementsByClassName ()","getElementsBytagName () "o" QuerySelectorAll ()" métodos. El estilo en línea se utiliza para diseñar un solo elemento, mientras que múltiples elementos utilizan el enfoque de estilo global para el estilo. Este tutorial describió el proceso de diseñar la página usando JavaScript.