¿Cómo puedes colocar CSS en JavaScript??

"Hoja de estilo en cascada (CSS)"Es esencial para aplicar el estilo al diseño general de documentos y hacer que una página web sea atractiva y fácil de usar. Más específicamente, colocar CSS en JavaScript es muy útil para realizar las funcionalidades complejas en JavaScript, junto con hacer que el sitio web o la página web general sea atractivo y accesible.

Este artículo discutirá ejemplos de vinculación de CSS con JavaScript.

¿Cómo puedes colocar CSS en JavaScript??

CSS se puede colocar en JavaScript obteniendo el elemento Head HTML, creando un nuevo elemento de enlace y configurando sus atributos para acceder al archivo CSS particular.

Consulte el ejemplo proporcionado para comprender los conceptos establecidos.

Ejemplo 1: Crear un enlace en JavaScript y agregarlo al encabezado usando CSS

En el siguiente ejemplo, obtenga el elemento Head HTML usando el "documento.getElementsBytagName ()Método "que incluirá un elemento en el DOM (modelo de objeto de documento) dinámicamente:

var htmlhead = documento.getElementsByTagName ('Head') [0];

Ahora, cree un nuevo elemento de enlace usando el "documento.createElement ()" método:

VAR LINKCSS = documento.createElement ('enlace');

Después de eso, establezca los atributos para el elemento de enlace creado para relacionar el documento actual con el documento vinculado (CSS) especificando el tipo de archivo y el nombre del archivo de la siguiente manera:

linkcss.rel = 'Stylesheet';
linkcss.type = 'text/css';
linkcss.href = 'linkcss.CSS ';

El "añadir Niño()El método "agregará el elemento de enlace que se especifica como su argumento al cabezal HTML:

cabeza html.appendChild (enlace);

En el siguiente paso, acceda al elemento creado llamado "enlace"Usando el atributo de clase:

Coloque CSS en JavaScript

Finalmente, aplique el estilo CSS en el encabezado agregado.

Código CSS

.enlace
color azul;
tamaño de fuente: 24px;
Text-Align: Center;

Producción

En la salida anterior, se puede observar que el estilo CSS se aplica en el encabezado especificado accediendo al enlace creado en JavaScript.

Ejemplo 2: Crear un enlace en JavaScript y agregarlo a DIV usando CSS

En el siguiente ejemplo, repita los pasos discutidos anteriormente para obtener el elemento HTML Head, creando un nuevo elemento de enlace, asignando los atributos para el elemento de enlace creado y agregar el elemento de enlace al cabezal HTML:

VAR LINKCSS = documento.createElement ('enlace');
linkcss.rel = 'Stylesheet';
linkcss.type = 'text/css';
linkcss.href = 'linkcss2.CSS '; documento.getElementsBytagName ('Head') [0].AppendChild (LinkCSS);

A continuación, incluya un "div"En HTML y acceda al enlace creado con el siguiente valor que se mostrará en el DOM:

Coloque CSS en JavaScript

Por último, implementa el estilo CSS en el DIV especificado refiriéndose al elemento creado ".enlace". El estilo incluye el ajuste del tamaño de la fuente, el peso de fuente, el color, el color de fondo, el relleno y el alineado de texto:

Código CSS

.enlace
tamaño de fuente: 24px;
Font-Weight: Bold;
color blanco;
Color de fondo: verde;
relleno: 10px;
Text-Align: Center;

Producción

Hemos explicado el procedimiento para colocar CSS en JavaScript.

Conclusión

CSS se puede colocar en JavaScript obteniendo el cabezal HTML, creando un nuevo elemento y estableciendo los atributos para ello, lo que da como resultado unir el archivo CSS en particular y agregarlo al cabezal HTML para aplicar al encabezado o Div Div. Este blog demostró el concepto de colocar CSS en JavaScript con la ayuda de ejemplos.