Changer la propriété CSS avec JavaScript

1. Changer la propriété CSS avec getElementsByClassName dans JavaScript
2. Changer la propriété CSS avec getElementById en JavaScript
3. Changer la propriété CSS avec querySelector() en JavaScript
4. Conclusion

Le langage HTML (HyperText Markup Language) est statique et généralement stupide. Cela signifie qu’il n’a pas les capacités d’exécuter des morceaux de code basés sur des conditions dynamiques. Il n’a pas de dispositions pour les blocs de condition if pour afficher / masquer certains éléments HTML ou balises si une condition est satisfaite. Pour de tels scénarios, nous pouvons avoir besoin de s’appuyer sur JavaScript ou jQuery pour modifier les styles CSS d’un élément HTML.

Pour changer le style d’un élément HTML, disons un <div>, nous devons sélectionner le <div> ou cet élément HTML particulier de manière unique. Maintenant, nous pouvons le faire avec les fonctions suivantes de l’interface de document.

Changer la propriété CSS avec getElementsByClassName dans JavaScript

getElementsByClassName recherche tout le document HTML et retourne un tableau de tous les éléments HTML dont le nom de classe est passé dans les paramètres de cette fonction. Nous pouvons également l’utiliser sur un élément pour trouver les sous-éléments avec le nom de classe CSS spécifié. La syntaxe de getElementByClassName est la suivante.

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

Définir le style à l’aide de element.style

Une fois que nous avons identifié l’élément de manière unique, nous pouvons utiliser les méthodes .style ou .className pour changer ses styles CSS. Reportez-vous aux exemples suivants.

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

Notez que dans la méthode changeStyle() nous interrogeons l’élément d’entrée avec la méthode document.getElementsByClassName("input-blue-border"). Il renvoie un tableau avec des éléments sélectionnés. Nous sélectionnons le premier élément du tableau et changeons sa bordure aquarelle avec .style.borderColor = "red".

Définir le style à l’aide de element.className

On peut utiliser element.className pour changer divers paramètres de style d’un élément HTML en les regroupant comme une classe et en attribuant le nom de la classe à l’élément sélectionné avec element.className. Cette méthode est utile, en particulier dans les scénarios où nous devons afficher une erreur dans un champ de saisie. Dans ce cas, nous devons changer la couleur de la bordure du champ de saisie en couleur rouge et le texte intérieur de l’entrée en couleur rouge. Par conséquent, nous pouvons regrouper ces styles en tant que classe et les affecter à l’élément en utilisant l’attribut element.className. Le code suivant illustre la gestion des erreurs.

<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 classe input-error a quelques attributs qui définissent la couleur de la bordure et la couleur de la police du champ de saisie sur le rouge.

Remarques

• La méthode getElementByClassName() renvoie un tableau d’éléments qui qualifient la valeur du nom de classe passée en arguments.
• getElementByClassName() peut être utilisé tout en appliquant des changements de style à plus d’un élément en itérant sur le tableau retourné par cette méthode.
• Une fois l’élément sélectionné, element.style.<attribut de style> définit l’attribut de style particulier sur l’élément sélectionné.
• De même, element.className permet de définir plus d’un changement de style sur l’élément HTML sélectionné en regroupant ces attributs de style comme une classe CSS.

Changer la propriété CSS avec getElementById en JavaScript

Si nous avons un identifiant unique attribué à un élément HTML, nous pouvons l’interroger et changer son style avec la fonction getElementById() de l’interface Document. C’est la méthode la plus utilisée par les développeurs Web. La plupart du temps, les identifiants assignés à un div seront gardés uniques afin que lors de l’exécution de la fonction getElementById(), les autres éléments HTML ne soient pas sélectionnés. La syntaxe de getElementById() est illustrée ci-dessous.

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

Lorsque nous sélectionnons un élément unique, dans ce cas, les changements de style sont faciles à faire. Les codes suivants décrivent les moyens. Il est similaire à ceux mentionnés précédemment, à une différence près de la manière dont nous recherchons un élément. Ici, nous identifions de manière unique les nœuds HTML avec l’ID d’élément.

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

Remarques

• Contrairement à la méthode getElementByClassName(), la méthode getElementById() ne retourne qu’un seul objet qui est l’élément nœud sélectionné par la requête.
• Le HTML prévu doit avoir un attribut id pour que la méthode getElementById() fonctionne.
• Si plusieurs nœuds HTML ont le même identifiant, alors la méthode getElementById() retournera le premier élément ayant l’identifiant spécifié.
• Contrairement à getElementByClassName(), les changements de style peuvent être appliqués directement sur l’objet retourné par la fonction getElementById() car elle renvoie un objet au lieu d’un tableau.

Changer la propriété CSS avec querySelector() en JavaScript

La méthode querySelector() est un sur-ensemble de fonctionnalités offertes par les mécanismes de sélection d’éléments. Il a la puissance combinée des méthodes getElementsByClassName() et getElementById(). Avec cette méthode, nous pouvons sélectionner l’élément HTML de la même manière lors de l’écriture de classes CSS. Cela peut fonctionner pour sélectionner un élément par identifiant, par classe et même par la balise HTML. Elle se comporte de la même manière que la méthode getElementById() en termes de type de retour. querySelector() retourne uniquement le premier élément de nœud HTML qui satisfait aux critères mentionnés dans les paramètres. La syntaxe utilisée pour querySelector() est la suivante:

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

Ainsi, ici aussi, le style peut être appliqué à l’élément HTML sélectionné en ajoutant .style.borderColor ou .className. Si nous utilisons la même structure HTML et changeons la méthode onclick en changeStyle(), nous pouvons parvenir à apporter le nouveau style dynamiquement en ajoutant le code comme décrit ci-dessous dans le JavaScript:

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

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

De même, si nous voulons changer la classe CSS de l’entrée, au lieu d’un simple changement de style, nous devons utiliser l’attribut .className() au lieu de .style.borderColor dans l’exemple ci-dessus.

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

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

Remarques

• Il vaut la peine d’avoir un œil sur le type de retour de la fonction document.querySelector(). Au lieu de renvoyer tous les objets HTML satisfaisant la requête, il renvoie le premier élément qui correspond à la condition de la requête.
• L’intérêt d’utiliser le querySelector() est que nous pouvons l’utiliser dans diverses circonstances, que ce soit une requête basée sur l’id de l’élément HTML ou sa classe CSS ou même avec le nom de la balise HTML.
• Changer dynamiquement les styles de plusieurs divs satisfaisant les critères de requête peut ne pas être possible avec querySelector() car il renvoie un objet au lieu d’un tableau d’éléments HTML passant les termes de la requête.

Conclusion

Pour changer le style d’un élément HTML lors de l’exécution, nous pouvons utiliser les attributs .style ou .className de l’élément HTML sélectionné. Les défis sont relevés lors de la sélection du nœud HTML cible. Il existe différentes manières de sélectionner des nœuds HTML de manière unique. Nous pouvons utiliser la méthode getElementsByClassName(), qui utilise le nom d’une classe CSS pour interroger le nœud HTML. Ou sélectionnez uniquement un élément en lui attribuant un identifiant et en l’interrogeant avec .getElementById() ou en utilisant la méthode polyvalente querySelector() qui peut s’adapter à toutes les circonstances en comprenant la requête en fonction des paramètres qui lui sont passés.