Cómo cambiar CSS con JavaScript

El lenguaje HTML es simplemente un lenguaje de marcado que no puede realizar ninguna función, y no puede ejecutar códigos basados ​​en varios eventos dinámicos. Para este propósito, tenemos que usar JavaScript para cambiar el estilo CSS de cualquier elemento HTML, ya que HTML no puede hacer esto por sí solo.

Puede haber varias razones por las cuales necesitamos cambiar CSS y manipular con elementos HTML, podría ser cargar la hoja de estilo dinámicamente, para cambiar el color de un botón cuando un usuario hace clic en él o para escribir CSS en JavaScript. Todos estos cambios se pueden hacer a través de JavaScript. En este artículo veremos varias formas de acceder a CSS con JavaScript y cambiarlo.

Uso de JavaScript para cambiar CSS

Existen varios métodos en JavaScript que ayudan a acceder a elementos HTML y a través de eso podemos manipular los valores de CSS. Algunos de estos métodos se explican a continuación junto con ejemplos.

Usar getElementsByClassName ()

El método getElementByClassName () toma una cadena como nombre de clase y busca el documento HTML completo y devuelve los elementos con el mismo nombre de clase. Una vez que se identifica el nombre de la clase, podemos cambiar las propiedades de CSS como se muestra a continuación en el ejemplo:

HTML:

Cuadro de entrada:


Cambiar el borde

JavaScript:

Aquí buscamos el elemento HTML por className y cambiamos las propiedades CSS de esos elementos usando estilo.color de fondo y estilo.color del borde.

Producción:

Usar getElementById ()

Otro método para usar es getElementById () que busca todos los elementos HTML con IDS similares y realiza la función asignada en ellos. Se utilizan principalmente varios divs que se asignan con ID y se buscan estos ID utilizando este método. Estos son los métodos más utilizados por los desarrolladores, a continuación hay un ejemplo:

HTML:

Cuadro de entrada:


Cambiar el borde

JavaScript:

Aquí hemos utilizado el método para buscar todos los elementos usando su ID y cambiamos las propiedades de CSS usando estilo.

Producción:

Uso de QuerySelector ()

Otro método que funciona al igual que los dos métodos anteriores es el QuerySelector () Método que puede buscar por nombre de clase, nombre de ID e incluso por etiquetas HTML, pero solo devuelve el primer elemento HTML mencionado a la búsqueda. A continuación se muestran las formas de usar QuerySelector:

documento.QuerySelector ("# id de div");
documento.QuerySelector (". nombre de clase CSS ");
documento.QuerySelector ("Etiqueta HTML como: div>");

A continuación se muestra un ejemplo de QuerySelector () y cómo se puede usar con el nombre de clase, IDS, etc.:

HTML:

Cuadro de entrada:


Cambiar el borde

JavaScript:

Aquí utilizamos el método QuerySelector () para buscar clases e ID de Divs, y cambiamos sus propiedades CSS.

Producción:

Conclusión

Hay varias razones para cambiar CSS, y la mejor manera de hacerlo es usar JavaScript, ya que puede acceder fácilmente a los elementos de HTML y cambiar sus propiedades CSS. En este artículo discutimos cómo cambiar CSS usando JavaScript, varios métodos proporcionados en JavaScript para cambiar los valores de los elementos HTML. Estos facilitan el trabajo de los desarrolladores y hacen que la página web sea más dinámica. A través de estos métodos, podemos cambiar los colores de los botones en el clic, los colores de fondo, los colores de fuentes, etc., manipular fácilmente con las propiedades de CSS.