JavaScript Ajouter une classe à un élément
Ce tutoriel abordera l’ajout d’une classe à un élément donné en utilisant la propriété classList en JavaScript.
Ajouter une classe à un élément donné en utilisant la propriété classList en JavaScript
Si vous souhaitez ajouter une classe à un élément donné en JavaScript, vous pouvez utiliser la propriété classList. Tout d’abord, vous devez obtenir l’élément donné, et le moyen le plus simple de le faire est de l’obtenir en utilisant son id. Supposons qu’un id ne soit pas donné à l’élément ; dans ce cas, vous pouvez lui donner un id unique et obtenir l’élément en utilisant la propriété getElementById dans JavaScript et le stocker dans une variable. Après cela, vous pouvez utiliser la variable pour modifier sa propriété en utilisant la propriété classList. Par exemple, changeons la classe d’un texte à l’aide d’un bouton. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.newclass {
width: 90%;
padding: 30px;
background-color: red;
color: yellow;
font-size: 30px;
}
</style>
<body>
<button onclick="myFun()">Try it</button>
<div id="test">
Adding Class Test
</div>
<script type="text/javascript">
function myFun() {
var ob = document.getElementById("test");
ob.classList.add("newclass");
}
</script>
</body>
</html>
Dans le code ci-dessus, nous avons une balise de style dans laquelle nous définissons les propriétés d’un objet de classe ; à l’intérieur de la balise body, nous avons un bouton et du texte, et à l’intérieur de la balise script, nous modifions la classe du texte en utilisant son id. Dans cet exemple, la feuille de style et le code JavaScript sont placés dans le même fichier HTML, mais vous pouvez également les mettre dans des fichiers séparés et les lier au fichier HTML. Pour exécuter le code ci-dessus, vous devez copier le code dans un fichier HTML et l’ouvrir à l’aide d’un navigateur.
Production:
Comme vous pouvez le voir dans la sortie, il y a un bouton et du texte. Lorsque vous appuyez sur ce bouton, la classe du texte sera modifiée.
Sortie lorsque le bouton est enfoncé :
Comme vous pouvez le voir dans la sortie, la forme du texte est modifiée en raison du changement de classe. Dans cet exemple, nous utilisons un bouton pour changer la classe d’un élément, mais vous pouvez changer la condition sur laquelle vous voulez changer la classe d’un élément donné. Vous ne pouvez pas utiliser la propriété classList dans Internet Explorer 9. À la place, vous pouvez utiliser l’opérateur += pour ajouter la propriété à un élément donné. Vous devez modifier la dernière ligne de la fonction myFun à l’intérieur de la balise de script avec la ligne ci-dessous.
ob.className += " newclass";
Vous devez utiliser un espace avant le nom de la classe car il y a peut-être d’autres classes présentes.
