¿Cómo se agrega CSS con JavaScript?

Hay varios escenarios en los que los programadores necesitan diseñar la página usando JavaScript. Por ejemplo, cambiando dinámicamente el estilo de los elementos en las interacciones del usuario, incluida la muestra de diferentes animaciones o estilos en el enfoque o el flujo en cualquier texto, etc. Para el estilo dinámico, el uso del estilo CSS en JavaScript es más eficiente. Proporciona una forma flexible y dinámica de administrar estilos y hacer que las aplicaciones sean más fáciles de usar.

Este artículo describirá los métodos para agregar CSS con JavaScript.

Cómo agregar CSS con JavaScript?

En JavaScript, puede agregar estilos CSS a un elemento modificando su propiedad de estilo utilizando los siguientes métodos o enfoques:

• Propiedad de estilo como estilo en línea
• método setattribute () como estilo en línea
• Método createElement () como un estilo global

Método 1: Agregue CSS con JavaScript utilizando la propiedad "estilo"

Para agregar CSS en JavaScript, use el "estilo" propiedad. Se utiliza para acceder y manipular los estilos en línea de un elemento. Da un objeto que representa los estilos en línea de un elemento y le permite obtener o establecer propiedades de estilo individual.

Sintaxis
Para agregar estilo CSS en JavaScript, la siguiente sintaxis se utiliza para el "estilo" propiedad:

elemento.estilo;

Aquí, "elemento"Es una referencia a un elemento HTML.

Ejemplo
En el siguiente ejemplo, peinaremos los botones usando JavaScript. En primer lugar, crearemos tres botones y asignaremos IDS, lo que ayuda a acceder a los elementos de los botones para el estilo:

Aceptar
Rechazar
Aceptar

Antes de diseñar, la salida se verá así:

Ahora, diseñemos estos botones en JavaScript usando el "estilo" propiedad. Primero, obtenga todos los elementos del botón utilizando sus ID asignados con la ayuda del "getElementById ()" método:

Dejar de acuerdo = documento.getElementById ("BTN1");
dejar rechazar = documento.getElementById ("BTN2");
Dejar aceptar = documento.getElementById ("BTN3");

Establezca los colores de fondo de todos estos botones utilizando el "estilo" propiedad:

aceptar.estilo.backgroundColor = "verde";
rechazar.estilo.backgroundColor = "rojo";
aceptar.estilo.backgroundColor = "Yellow";

Como puede ver, los botones han sido diseñados con éxito utilizando el "estilo" propiedad:

Método 2: Agregar CSS con JavaScript usando el método "setAttribute ()"

Para agregar el estilo CSS en JavaScript, use el "setAttribute ()" método. Se usa para establecer o agregar un atributo y su valor a un elemento HTML.

Sintaxis
La siguiente sintaxis se utiliza para el "setAttribute ()" método:

elemento.setAttribute (atributo, valor);

Ejemplo
Aquí, estableceremos los diferentes estilos en los botones en JavaScript usando el "setAttribute ()" método. Establezca el radio de borde de todos los botones en ".5", Y el color de texto del"Aceptar" y "Rechazar"Botones a"blanco".

aceptar.setAttribute ("estilo", "Color de fondo: verde; color: blanco; border-radio: .5rem; ");
rechazar.setAttribute ("estilo", "Color de fondo: rojo; color: blanco; border-radio: .5rem; ");
aceptar.setAttribute ("estilo", "color de fondo: amarillo; radio de borde: .5rem; ");

Producción

Método 3: Agregue CSS con JavaScript usando el método "CreateElement ()"

Si desea crear clases o identificaciones en el estilo JavaScript como en el estilo CSS, use el "createElement ()" método. Se utiliza para crear dinámicamente un nuevo elemento. Para el estilo crea un "estilo"Elemento usando este método. El "CreateElement ('estilo')El método en JavaScript se usa para crear dinámicamente un nuevo elemento de estilo, que se puede usar para agregar estilos CSS a una página web.

Sintaxis
La sintaxis dada se usa para el "createElement ()" método:

documento.createElement (ElementType);

Para agregar estilo CSS en JavaScript, use la sintaxis dada:

estilo const = documento.createElement ('estilo');

Luego agregue el elemento de estilo en la etiqueta de la cabeza usando la sintaxis a continuación:

documento.cabeza.appendchild (estilo);

Aquí, "estilo"Es una referencia al elemento de estilo recién creado, y"documento.cabeza"Es el elemento principal del documento HTML.

Ejemplo
Primero, cree un elemento de estilo usando el "createElement ()" método:

estilo var = documento.createElement ('estilo');

Ahora, crea un "btn"Clase para aplicar el mismo estilo en todos los botones e ID"BTN1","btn2" y "BTN3"Para el estilo de botón individual:

estilo.innerhtml = '
.btn
tamaño de fuente: 1.1rem;
relleno: 3px;
margen: 2px;
Font-Family: Sans-Serif;
Radio fronterizo: .5rem;

#BTN1
Color de fondo: verde;
color blanco;

#btn2
Color de fondo: rojo;
color blanco;

#btn3
Color de fondo: amarillo;

';

Ahora, agregue el elemento de estilo al jefe del documento pasando como parámetro al "añadir Niño()" método:

documento.cabeza.appendchild (estilo);

Producción

Eso se trata de agregar CSS en JavaScript.

Conclusión

Para agregar CSS con JavaScript, utilice el estilo en línea, incluido el "estilo"Propiedad, y"setAttribute ()"Método, o el estilo global utilizando el"createElement ()" método. El estilo global es más eficiente, mientras que no se recomienda un método en línea, ya que dificulta mantener los estilos de aplicación y puede conducir a la repetición del código. Este artículo describió los métodos para agregar CSS con JavaScript.