Establecer el estilo de un elemento de formulario HTML en JavaScript

1. Agregar estilo a un elemento HTML en JavaScript
2. Aplicar estilo a elementos con el nombre de clase en JavaScript
3. Aplicar estilo a etiquetas en JavaScript

Uno de los casos de uso para configurar un estilo personalizado para un elemento HTML en tiempo de ejecución es mientras se realizan validaciones en formularios. Tendremos que resaltar el elemento en rojo y mostrar un texto de validación como Username field cannot be left empty. Hay varias formas de establecer parámetros de estilo para un elemento HTML en tiempo de ejecución con JavaScript. Podemos agregar nuevos estilos y cambiar el estilo existente también. A continuación se muestran algunas formas en las que podemos establecer el estilo CSS en un elemento HTML mediante JavaScript.

Agregar estilo a un elemento HTML en JavaScript

Podemos cambiar el estilo de un elemento con el atributo .style de JavaScript. Antes, necesitamos consultar el elemento HTML y establecer el atributo .style. Hay varias formas de consultar un elemento HTML en JavaScript, que son las siguientes, pero la más utilizada es el método document.getElementById().

• getElementById(): de la interfaz del documento en JavaScript se utiliza para consultar un elemento HTML en función de su id. Por lo general, al diseñar una página web, los desarrolladores asignan una identificación única a los elementos HTML. El getElementById() devuelve el elemento que tiene el id como se especifica en los parámetros de la función getElementById(). Si hay más elementos con el mismo id, se devuelve el primer elemento con el id especificado.
• getElementsByClassName(): Otra forma de consultar un elemento HTML es con su nombre de clase asignado. Estos son nombres de clases de CSS que se suelen utilizar para decorar el elemento. Como más de un elemento HTML puede tener los mismos nombres de clase CSS, la función devuelve un array de elementos HTML. Podemos elegir alterar o agregar el estilo específico a un elemento o todos los elementos devueltos por la función getElementsByClassName().
• getElementsByName(): Similar a la forma en que seleccionamos un elemento HTML con su nombre de clase CSS, la función getElementsByName() usa el atributo name para filtrar el elemento HTML esperado. En este caso, puede haber más de un elemento HTML con los mismos nombres. Por lo tanto, devuelve un array de elementos HTML que tienen el atributo name igual que el que se pasó en sus parámetros.
• getElementsByTagName(): se utiliza en los casos en que necesitamos seleccionar etiquetas HTML particulares como las etiquetas <div>, <p>, <li>, etc. Hace que sea conveniente aplicar un estilo o conjunto de estilos a todos los elementos <div> de una sola vez. La función getElementsByTagName() devuelve un array de elementos con el nombre de etiqueta pasado en el parámetro a la función. Puede haber más de una etiqueta HTML cuyos estilos necesiten ser modificados de una sola vez.
• querySelector(): es como un método maestro para recuperar un elemento. Para comprender el uso de parámetros aceptados por esta función de JavaScript, piense en usar selectores para consultar elementos HTML en CSS. Podemos usar combinaciones de nombres de etiquetas como document.querySelector("div span") (para seleccionar todo el span dentro de los divs), document.querySelector("#elementID") (para consultar un elemento basado en su id ), document.querySelector(".sample-css") (para consultar los elementos que tienen el nombre de clase CSS sample-css) etc. Devuelve el primer elemento que satisface los criterios pasados ​​como parámetro a la función.
• querySelectorAll: es similar a querySelector() en todos los aspectos excepto en el tipo de retorno. En lugar de devolver solo el primer elemento que satisface los criterios como en la función querySelector(), la función querySelectorAll devuelve todos los elementos HTML que cumplen las condiciones mencionadas en los parámetros del método. Una vez que se selecciona un elemento HTML, usamos el atributo .style, seguido del nombre del estilo que deseamos cambiar o agregar. Por ejemplo, en el siguiente código, intentamos cambiar el color de fondo de un elemento que tiene id como username.

<div id="username">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementById('username').style.backgroundColor = 'green';
}

Si el elemento HTML seleccionado tiene el atributo de estilo (por ejemplo, el color de fondo) ya establecido, el siguiente código lo cambiará. Y si no tiene ningún atributo de estilo, el código JavaScript agrega un nuevo estilo en tiempo de ejecución.

Aplicar estilo a elementos con el nombre de clase en JavaScript

Podemos consultar un elemento usando el nombre de la clase con la función de JavaScript getElementsByClassName(). Una vez seleccionados los elementos, podemos agregar o cambiar el estilo de los elementos con el atributo .style. Este método se aplica cuando necesitamos tener atributos CSS adicionales en esa clase CSS particular del elemento. El siguiente código describe el uso.

<div id="username" class="blue-bg">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementsByClassName('blue-bg')[0].style.backgroundColor = 'green';
}

Nota: aquí, la función getElementsByClassName("blue-bg") devuelve un array de elementos. Por tanto, es necesario seleccionar el índice del elemento sobre el que pretendemos aplicar los estilos. Si el atributo de estilo ya está establecido por alguna clase CSS o por estilo en línea, el atributo .style lo sobrescribirá. Si aún no está configurado, agregará un nuevo atributo para establecer el estilo del elemento HTML de destino.

Aplicar estilo a etiquetas en JavaScript

En caso de que debamos agregar estilo a todos los div o todos los span, entonces podemos hacer uso de la función .getElementsByTagName(). Consulta al DOM los nombres de las etiquetas. Devuelve una colección de elementos HTML que satisfacen el nombre de etiqueta pasado como parámetro. Una vez que la función devolvió los elementos HTML, podemos aplicar el atributo de estilo a ese elemento usando su índice. El siguiente código lo elabora.

<div id="output">Hello World!!</div>
<form name="LoginForm">
    <div id="username" class="blue-bg">
        <label>User Name: </label>
        <input type="text" id="username" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.getElementsByTagName('div')[0].style.backgroundColor = 'green';
}

Al ejecutar el código anterior, el primer div (<div id="output">Hello World!!</div>) obtiene su color de fondo establecido en verde. Tenga en cuenta que como estamos apuntando al primer div, usamos el índice como 0 (document.getElementsByTagName("div")[0]). De manera similar, también podemos asignar atributos de estilo a la etiqueta del cuerpo con document.getElementsByTagName("body")[0].style.backgroundColor = "green". Como solo se permite una etiqueta de cuerpo en un documento HTML, podemos consultar directamente el elemento de cuerpo y aplicarle atributos de estilo con el atributo .body de la interfaz de document. Por lo tanto, el código se verá como document.body.style.backgroundColor = "green".