Definir o estilo de um elemento de formulário HTML em JavaScript

1. Adicionar estilo a um elemento HTML em JavaScript
2. Aplicar estilo a elementos com o nome da classe em JavaScript
3. Aplicar estilo a tags em JavaScript

Um dos casos de uso para definir o estilo personalizado para um elemento HTML em tempo de execução é durante a execução de validações em formulários. Precisamos destacar o elemento em vermelho e exibir um texto de validação como Username field cannot be left empty. Existem várias maneiras de definir parâmetros de estilo para um elemento HTML em tempo de execução com JavaScript. Podemos adicionar novos estilos e alterar o estilo existente também. A seguir estão algumas maneiras pelas quais podemos definir o estilo CSS para um elemento HTML usando JavaScript.

Adicionar estilo a um elemento HTML em JavaScript

Podemos alterar o estilo de um elemento com o atributo JavaScript .style. Antes disso, precisamos consultar o elemento HTML e definir o atributo .style. Existem várias maneiras de consultar um elemento HTML em JavaScript, que são as seguintes, mas a mais comumente usada é o método document.getElementById().

• getElementById(): da interface do documento em JavaScript é usado para consultar um elemento HTML com base em seu id. Normalmente, ao projetar uma página da web, os desenvolvedores atribuem um id único aos elementos HTML. O getElementById() retorna o elemento que possui o id conforme especificado nos parâmetros da função getElementById(). Se houver mais elementos com o mesmo id, o primeiro elemento com o id especificado será retornado.
• getElementsByClassName(): Outra forma de consultar um elemento HTML é com seu nome de classe atribuído. Esses são nomes de classes CSS geralmente usados ​​na decoração do elemento. Como mais de um elemento HTML pode ter os mesmos nomes de classe CSS, a função retorna um array de elementos HTML. Podemos escolher alterar ou adicionar o estilo específico a um elemento ou a todos os elementos retornados pela função getElementsByClassName().
• getElementsByName(): Semelhante à maneira como selecionamos um elemento HTML com seu nome de classe CSS, a função getElementsByName() usa o atributo name para filtrar o elemento HTML esperado. Nesse caso, pode haver mais de um elemento HTML com os mesmos nomes. Portanto, ele retorna um array de elementos HTML com o atributo name igual ao passado em seus parâmetros.
• getElementsByTagName(): é usado nos casos em que precisamos selecionar tags HTML específicas, como as tags <div>, <p>, <li> etc. Torna-se conveniente aplicar um estilo ou conjunto de estilos para todos os elementos <div> de uma vez. A função getElementsByTagName() retorna um array de elementos com o nome da tag passado no parâmetro para a função. Pode haver mais de uma tag HTML cujos estilos podem precisar de alteração de uma só vez.
• querySelector(): é como um método mestre de recuperação de um elemento. Para entender o uso de parâmetros aceitos por esta função JavaScript, pense em usar seletores para consultar elementos HTML em CSS. Podemos usar combinações de nomes de tag como document.querySelector("div span") (para selecionar todo o intervalo dentro dos divs), document.querySelector("#elementID") (para consultar um elemento com base em seu id ), document.querySelector(".sample-css") (para consultar os elementos que têm o nome de classe CSS sample-css) etc. Ele retorna o primeiro elemento que satisfaz os critérios passados ​​como um parâmetro para a função.
• querySelectorAll: é semelhante a querySelector() em todos os aspectos, exceto o tipo de retorno. Em vez de retornar apenas o primeiro elemento que satisfaça os critérios como na função querySelector(), a função querySelectorAll retorna todos os elementos HTML que atendem às condições mencionadas nos parâmetros do método. Uma vez que um elemento HTML é selecionado, usamos o atributo .style, seguido pelo nome do estilo que desejamos alterar ou adicionar. Por exemplo, no código a seguir, tentamos alterar a cor de fundo de um elemento que tem o 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';
}

Se o elemento HTML selecionado tiver o atributo de estilo (por exemplo, a cor de fundo) já definido, o código a seguir irá alterá-lo. E se não tiver nenhum atributo de estilo, um novo estilo é adicionado em tempo de execução pelo código JavaScript.

Aplicar estilo a elementos com o nome da classe em JavaScript

Podemos consultar um elemento usando o nome da classe com a função JavaScript getElementsByClassName(). Uma vez que os elementos são selecionados, podemos adicionar ou alterar o estilo dos elementos com o atributo .style. Este método é aplicado quando precisamos ter atributos CSS adicionais naquela classe CSS específica do elemento. O código a seguir descreve o 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: aqui, a função getElementsByClassName("blue-bg") retorna um array de elementos. Portanto, é necessário selecionar o índice do elemento no qual pretendemos aplicar os estilos. Se o atributo de estilo já estiver definido por alguma classe CSS ou por estilo inline, o atributo .style o substituirá. Se ainda não estiver definido, ele adicionará um novo atributo para definir o estilo do elemento HTML de destino.

Aplicar estilo a tags em JavaScript

No caso, devemos adicionar estilo a todos os div ou a todos os span, então podemos fazer uso da função .getElementsByTagName(). Ele consulta o DOM para obter os nomes das tags. Ele retorna uma coleção de elementos HTML que satisfazem o nome da tag passado como parâmetro. Uma vez que a função retornou os elementos HTML, podemos aplicar o atributo style a esse elemento usando seu índice. O código a seguir elabora isso.

<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';
}

Ao executar o código acima, o primeiro div (<div id="output">Hello World!!</div>) obtém sua cor de fundo definida como verde. Observe que, como estamos direcionando o primeiro div, usamos o índice como 0 (document.getElementsByTagName("div")[0]). Da mesma forma, podemos atribuir atributos de estilo à tag body também com document.getElementsByTagName("body")[0].style.backgroundColor = "green". Como apenas uma tag body é permitida em um documento HTML, podemos consultar diretamente o elemento body e aplicar atributos de estilo a ele com o atributo .body da interface document. Portanto, o código será semelhante a document.body.style.backgroundColor = "green".