Cambiar la propiedad CSS usando JavaScript

Para cambiar una propiedad CSS con JavaScript, selecciona el elemento de destino y asigna un valor a una propiedad de su objeto style. Si necesitas un conjunto de estilos relacionados, añade una clase CSS. Usa un ID o un selector CSS para un solo elemento, y una colección basada en clases cuando quieras actualizar todos los elementos coincidentes. El navegador proporciona el objeto document; jQuery es opcional.

Cambiar una propiedad CSS con element.style

Usa element.style cuando necesites establecer un único estilo en línea. En JavaScript, los nombres de las propiedades CSS con guiones se escriben en camelCase: border-color se convierte en borderColor. Este pequeño entorno de prueba permite ejecutar el patrón de selección y asignación en un entorno JavaScript; en una página, document es el documento real del navegador.

Ejecuta este ejemplo:
El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const input = { style: {} };
const document = {
  getElementById(id) {
    return id === "email" ? input : null;
  }
};

const element = document.getElementById("email");
if (element) {
  element.style.borderColor = "red";
}

La asignación a style cambia el estilo en línea del elemento. No modifica una regla de una hoja de estilos ni elimina otros estilos. En el código del navegador, la selección correspondiente es document.getElementById("email"); comprueba el valor devuelto antes de leer o cambiar sus propiedades.

Aplicar varios estilos con una clase CSS

Una clase es más fácil de mantener cuando un estado necesita varias declaraciones coordinadas. Define una clase en tu hoja de estilos y luego usa classList.add() para aplicarla y classList.remove() para quitarla. Por ejemplo, una clase de error de entrada puede establecer tanto un borde rojo como texto rojo. classList conserva las demás clases del elemento.

Asignar element.className = "input-error" también cambia el atributo de clase, pero reemplaza toda la cadena de clases. Se pierden las clases existentes, como las de diseño o validación, a menos que también se incluyan en la nueva cadena. Usa classList para añadir o quitar clases individuales; usa className cuando quieras reemplazar todas las clases deliberadamente.

Seleccionar elementos por clase con getElementsByClassName

document.getElementsByClassName("input-blue-border") devuelve una HTMLCollection activa de los elementos coincidentes, no un array. Se actualiza cuando los elementos coincidentes entran o salen del documento. Para cambiar todas las coincidencias actuales, recorre la colección con un bucle for...of y actualiza el estilo o la lista de clases de cada elemento. Si necesitas métodos de array, convierte primero la colección con Array.from(...).

También puedes llamar al método desde un elemento para buscar los descendientes coincidentes dentro de él. El argumento es un nombre de clase sin el punto inicial; usa .input-blue-border solo con una API de selectores CSS, como querySelector().

Seleccionar un elemento con getElementById o querySelector

document.getElementById("email") busca un elemento por su ID y devuelve el elemento coincidente o null. Los ID deben ser únicos en el documento; los ID duplicados son marcado no válido, así que no dependas de cuál de los duplicados se devuelve.

document.querySelector(".input-blue-border") acepta un selector CSS y devuelve el primer elemento coincidente, o null si no encuentra ninguno. Puede seleccionar por ID (#email), clase (.input-blue-border) o etiqueta (input). Aunque el selector pueda coincidir con varios elementos, querySelector() devuelve solo la primera coincidencia. Comprueba que el resultado no sea null antes de cambiar su estilo o sus clases.

Elegir un selector y gestionar las coincidencias ausentes o múltiples

Elige el selector según el elemento de destino y la cantidad de elementos que quieras actualizar: usa getElementById para un elemento con un ID único, o querySelector() cuando resulte más cómodo usar un selector CSS y solo necesites la primera coincidencia. Usa getElementsByClassName cuando deban cambiar todos los elementos con una clase. Para una declaración de estilo, establece element.style; para un estado con nombre que incluya varias declaraciones, activa o desactiva una clase.

Un selector puede no encontrar ningún elemento si este aún no está en el documento, si el ID o la clase están mal escritos o si el marcado todavía no se ha cargado. Ejecuta la selección cuando el marcado correspondiente ya exista o comprueba el valor devuelto antes de acceder a style o classList. Por ejemplo, en el navegador puedes usar const element = document.querySelector(".notice"); if (element) element.classList.add("is-visible");. Para actualizar un solo elemento de una colección de clases, elígelo deliberadamente; para actualizar todos, recorre la colección.

Resumen

Primero, selecciona el elemento que quieras modificar. Establece una única declaración en línea con element.style o usa classList para aplicar un conjunto de estilos y conservar las clases existentes. getElementById selecciona por ID, querySelector() devuelve la primera coincidencia de un selector CSS y getElementsByClassName proporciona una colección activa para actualizar todas las coincidencias de una clase. Comprueba el resultado de una selección de un solo elemento antes de usarlo y recorre la colección cuando debas actualizar varios elementos.