Cambiar la propiedad CSS usando JavaScript

1. Cambiar la propiedad CSS con getElementsByClassName en JavaScript
2. Cambiar la propiedad CSS con getElementById en JavaScript
3. Cambiar la propiedad CSS con querySelector() en JavaScript
4. Conclusión

El lenguaje de marcado de hipertexto (HTML) es estático y generalmente tonto. Significa que no tiene la capacidad para ejecutar fragmentos de código basados ​​en condiciones dinámicas. No tiene provisiones para bloques de condición if para mostrar u ocultar ciertos elementos HTML o etiquetas si se cumple una condición. Para tales escenarios, es posible que debamos confiar en JavaScript o jQuery para cambiar los estilos CSS de un elemento HTML.

Para cambiar el estilo de un elemento HTML, digamos un <div>, debemos seleccionar el <div> o ese elemento HTML en particular de forma única. Ahora, podemos hacer esto con las siguientes funciones de la interfaz de documentos.

Cambiar la propiedad CSS con getElementsByClassName en JavaScript

getElementsByClassName busca en todo el documento HTML y devuelve un array de todos los elementos HTML que tienen el nombre de la clase como se pasó en los parámetros de esta función. También podemos usarlo en un elemento para encontrar los subelementos con el nombre de clase CSS especificado. La sintaxis de getElementByClassName es la siguiente.

document.getElementsByClassName('green-class'));

Establecer estilo usando element.style

Una vez que hemos identificado el elemento de forma única, podemos utilizar los métodos .style o .className para cambiar sus estilos CSS. Consulte los siguientes ejemplos.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeStyle()">Change Border</button>
  </div>
</div>

function changeStyle() {
  document.getElementsByClassName('input-blue-border')[0].style.borderColor =
      'red';
}

Tenga en cuenta que en el método changeStyle() consultamos el elemento de entrada con el método document.getElementsByClassName("input-blue-border"). Devuelve un array con elementos seleccionados. Seleccionamos el primer elemento del array y cambiamos su color de borde con .style.borderColor = "red".

Establecer estilo usando element.className

Se puede usar element.className para cambiar varios parámetros de estilo de un elemento HTML al clasificarlos como una clase y asignar el nombre de la clase al elemento seleccionado con element.className. Este método es útil, especialmente en escenarios donde necesitamos mostrar un error en un campo de entrada. En ese caso, necesitamos cambiar el color del borde del campo de entrada a color rojo y el texto interno de la entrada a color rojo. Por lo tanto, podemos agrupar estos estilos como una clase y asignarlos al elemento usando el atributo element.className. El siguiente código ilustra el manejo de errores.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeClass()">Change Border</button>
  </div>
</div>

function changeClass() {
  document.getElementsByClassName('input-blue-border')[0].className =
      'input-error';
}

La clase input-error tiene un par de atributos que establecen el color del borde y el color de la fuente del campo de entrada en rojo.

Observaciones

• El método getElementByClassName() devuelve un array de elementos que califican el valor del nombre de clase pasado como argumentos.
• getElementByClassName() se puede utilizar al aplicar cambios de estilo a más de un elemento iterando sobre el array devuelta por este método.
• Una vez que se selecciona el elemento, element.style.<style attribute> establece el atributo de estilo particular para el elemento seleccionado.
• De manera similar, element.className ayuda a establecer más de un cambio de estilo en el elemento HTML seleccionado al clasificar esos atributos de estilo como una clase CSS.

Cambiar la propiedad CSS con getElementById en JavaScript

Si tenemos un id único asignado a un elemento HTML, podemos consultarlo y cambiar su estilo con la función getElementById() de la interfaz Document. Es el método más utilizado por los desarrolladores web. La mayoría de los identificadores asignados a un div se mantendrán únicos de modo que mientras se ejecuta la función getElementById(), no se seleccionen otros elementos HTML. La sintaxis de getElementById() es la que se muestra a continuación.

document.getElementById("parent-1"));

Cuando seleccionamos un elemento único, en este caso, los cambios de estilo son fáciles de hacer. Los siguientes códigos describen las formas. Es similar a los mencionados anteriormente, con la diferencia de cómo consultamos un elemento. Aquí, identificamos de forma única los nodos HTML con la identificación del elemento.

document.getElementById('b1').style.borderColor = 'red';
document.getElementById('b1').className = 'input-error';

Observaciones

• A diferencia del getElementByClassName(), el método getElementById() devuelve solo un objeto que es el elemento de nodo seleccionado por la consulta.
• El HTML deseado debe tener un atributo id para que funcione el método getElementById().
• Si más de un nodo HTML tiene el mismo id, entonces el método getElementById() devolverá el primer elemento que tenga el id especificado.
• A diferencia de getElementByClassName(), los cambios de estilo se pueden aplicar directamente en el objeto devuelto por la función getElementById() ya que devuelve un objeto en lugar de un array.

Cambiar la propiedad CSS con querySelector() en JavaScript

El método querySelector() es un superconjunto de características ofrecidas por los mecanismos de selección de elementos. Tiene el poder combinado de los métodos getElementsByClassName() y getElementById(). Con este método, podemos seleccionar el elemento HTML de la misma manera mientras escribimos clases CSS. Puede funcionar para seleccionar un elemento por id, por clase e incluso por la etiqueta HTML. Se comporta de manera similar al método getElementById() en términos del tipo de retorno. querySelector() devuelve solo el primer elemento de nodo HTML que satisface los criterios mencionados en los parámetros. La sintaxis utilizada para querySelector() es la siguiente:

document.querySelector('#<id of div>');
document.querySelector('.<css class name>');
document.querySelector('<HTML tag eg: div>');

Por tanto, aquí también se puede aplicar el estilo al elemento HTML seleccionado añadiendo .style.borderColor o .className. Si usamos la misma estructura HTML y cambiamos el método onclick a changeStyle(), podemos lograr traer el nuevo estilo dinámicamente agregando el código como se describe a continuación en el JavaScript:

<button class="ml-3" onclick="changeStyle()">Change Border</button>

function changeStyle() {
  document.querySelector('.input-blue-border').style.borderColor = 'red';
}

De manera similar, si vamos a cambiar la clase CSS de la entrada, en lugar de solo un cambio de estilo, necesitamos usar el atributo .className() en lugar de .style.borderColor en el ejemplo anterior.

<button class="ml-3" onclick="changeClass()">Change Border</button>

function changeClass() {
  document.querySelector('.input-blue-border').className = 'input-error';
}

Observaciones

• Merece la pena prestar atención al tipo de retorno de la función document.querySelector(). En lugar de devolver todos los objetos HTML que satisfacen la consulta, devuelve el primer elemento que se ajusta a la condición de la consulta.
• La belleza de usar el querySelector() es que podemos usarlo en varias circunstancias, ya sea mediante consultas basadas en la identificación del elemento HTML o en su clase CSS o incluso con el nombre de la etiqueta HTML.
• Es posible que no sea posible cambiar dinámicamente los estilos de más de un div que satisfagan los criterios de consulta con querySelector(), ya que devuelve un objeto en lugar de un array de elementos HTML que pasan los términos de la consulta.

Conclusión

Para cambiar el estilo de un elemento HTML en tiempo de ejecución, podemos hacer uso de los atributos .style o .className del elemento HTML seleccionado. Los desafíos se enfrentan al seleccionar el nodo HTML de destino. Hay varias formas de seleccionar nodos HTML de forma única. Podemos usar el método getElementsByClassName(), que usa el nombre de una clase CSS para consultar el nodo HTML. O seleccione de forma única un elemento asignándole una identificación y consultándolo con .getElementById() o utilizando el método multipropósito querySelector() que puede adaptarse a todas las circunstancias entendiendo la consulta en función de los parámetros que se le pasan.