Définir le style d'un élément de formulaire HTML en JavaScript

1. Ajouter un style à un élément HTML en JavaScript
2. Appliquer un style aux éléments avec le nom de classe en JavaScript
3. Appliquer un style aux balises en JavaScript

L’un des cas d’utilisation pour définir un style personnalisé sur un élément HTML au moment de l’exécution est l’exécution de validations dans les formulaires. Nous devrons surligner l’élément en rouge et afficher un texte de validation comme Username field cannot be left empty. Il existe différentes manières de définir des paramètres de style sur un élément HTML au moment de l’exécution avec JavaScript. Nous pouvons ajouter de nouveaux styles et modifier le style existant également. Voici quelques façons dont nous pouvons définir le style CSS sur un élément HTML à l’aide de JavaScript.

Ajouter un style à un élément HTML en JavaScript

On peut changer le style d’un élément avec l’attribut JavaScript .style. Avant cela, nous devons interroger l’élément HTML et définir l’attribut .style. Il existe différentes manières d’interroger un élément HTML en JavaScript, qui sont les suivantes, mais la plus couramment utilisée est la méthode document.getElementById().

• getElementById() : de l’interface du document en JavaScript permet d’interroger un élément HTML en fonction de son identifiant. Habituellement, lors de la conception d’une page Web, les développeurs attribuent un identifiant unique aux éléments HTML. Le getElementById() renvoie l’élément qui a l’identifiant tel que spécifié dans les paramètres de la fonction getElementById(). S’il y a plusieurs éléments avec le même identifiant, le premier élément avec l’identifiant spécifié est renvoyé.
• getElementsByClassName() : une autre façon d’interroger un élément HTML consiste à utiliser le nom de classe qui lui est attribué. Ce sont des noms de classe CSS généralement utilisés pour décorer l’élément. Comme plusieurs éléments HTML peuvent avoir les mêmes noms de classe CSS, la fonction renvoie un tableau d’éléments HTML. Nous pouvons choisir de modifier ou d’ajouter le style spécifique à un élément ou à tous les éléments renvoyés par la fonction getElementsByClassName().
• getElementsByName() : De la même manière que nous sélectionnons un élément HTML avec son nom de classe CSS, la fonction getElementsByName() utilise l’attribut name pour filtrer l’élément HTML attendu. Dans ce cas, il peut y avoir plusieurs éléments HTML avec les mêmes noms. Par conséquent, il renvoie un tableau d’éléments HTML dont l’attribut name est le même que celui passé dans ses paramètres.
• getElementsByTagName() : est utilisé dans les cas où nous devons sélectionner des balises HTML particulières comme les balises <div>, <p>, <li> etc. Cela facilite l’application d’un style ou d’un ensemble de styles à tous les éléments <div> en une seule fois. La fonction getElementsByTagName() renvoie un tableau d’éléments dont le nom de balise est passé en paramètre à la fonction. Il peut y avoir plusieurs balises HTML dont les styles peuvent nécessiter une modification en une seule fois.
• querySelector() : est comme une méthode maître pour récupérer un élément. Pour comprendre l’utilisation des paramètres acceptés par cette fonction JavaScript, pensez à utiliser des sélecteurs pour interroger des éléments HTML en CSS. Nous pouvons utiliser des combinaisons de noms de balises comme document.querySelector("div span") (pour sélectionner toute la durée à l’intérieur des divs), document.querySelector("#elementID") (pour interroger un élément en fonction de son identifiant ), document.querySelector(".sample-css") (pour rechercher des éléments qui ont le nom de classe CSS sample-css) etc. Il renvoie le premier élément qui satisfait les critères passés en paramètre à la fonction.
• querySelectorAll : est similaire à querySelector() dans tous les aspects sauf le type de retour. Au lieu de renvoyer uniquement le premier élément qui satisfait aux critères comme dans la fonction querySelector(), la fonction querySelectorAll() renvoie tous les éléments HTML qui remplissent les conditions mentionnées dans les paramètres de la méthode. Une fois qu’un élément HTML est sélectionné, nous utilisons l’attribut .style, suivi du nom du style que nous souhaitons modifier ou ajouter. Par exemple, dans le code suivant, on essaie de changer la couleur de fond d’un élément ayant comme username l’identifiant.

<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 l’élément HTML sélectionné a l’attribut style (par exemple, la couleur d’arrière-plan) déjà défini, le code suivant le modifiera. Et s’il n’a pas d’attribut de style, alors un nouveau style est ajouté au moment de l’exécution par le code JavaScript.

Appliquer un style aux éléments avec le nom de classe en JavaScript

Nous pouvons rechercher un élément en utilisant le nom de la classe avec la fonction JavaScript getElementsByClassName(). Une fois le ou les éléments sélectionnés, nous pouvons ajouter ou modifier le style des éléments avec l’attribut .style. Cette méthode est appliquée lorsque nous avons besoin d’attributs CSS supplémentaires dans cette classe CSS particulière de l’élément. Le code suivant décrit l’utilisation.

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

Remarque : ici, la fonction getElementsByClassName("blue-bg") renvoie un tableau d’éléments. Il faut donc sélectionner l’index de l’élément sur lequel on compte appliquer les styles. Si l’attribut style est déjà défini par une classe CSS ou par un style en ligne, l’attribut .style l’écrasera. S’il n’est pas déjà défini, il ajoutera un nouvel attribut pour définir le style de l’élément HTML ciblé.

Appliquer un style aux balises en JavaScript

Au cas où, nous devons ajouter du style à tous les div ou à tous les span, alors nous pouvons utiliser la fonction .getElementsByTagName(). Il interroge le DOM pour les noms de balises. Il renvoie une collection d’éléments HTML qui satisfont au nom de balise passé en paramètre. Une fois que la fonction a renvoyé les éléments HTML, nous pouvons appliquer l’attribut style à cet élément en utilisant son index. Le code suivant le détaille.

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

Lors de l’exécution du code ci-dessus, le premier div (<div id="output">Hello World!!</div>) obtient sa couleur de fond définie en vert. Notez que comme nous ciblons le premier div, nous utilisons l’index comme 0 (document.getElementsByTagName("div")[0]). De même, nous pouvons également attribuer des attributs de style à la balise body avec document.getElementsByTagName("body")[0].style.backgroundColor = "green". Comme une seule balise body est autorisée dans un document HTML, nous pouvons directement interroger l’élément body et lui appliquer des attributs de style avec l’attribut .body de l’interface document. Par conséquent, le code ressemblera à document.body.style.backgroundColor = "green".