Maison > Article > interface Web > Comment changer la classe d'un élément en utilisant JavaScript ?
Comment changer la classe d'un élément en utilisant JavaScript ?
- PHPzavant
- 2023-08-30 14:29:041245parcourir
L'attribut
className est utilisé pour changer la classe d'un élément. Ici, nous verrons deux exemples -
- Comment changer la classe d'un élément à l'aide de l'attribut className.
- Comment basculer entre les anciens et les nouveaux cours.
Changez la classe d'un élément à l'aide de l'attribut className
Dans cet exemple, nous allons changer la classe d'un élément en utilisant l'attribut className. Disons que nous avons un div avec la classe oldStyle -
<div id="mydiv" class="oldStyle"> <p>The div...</p> </div>
Nous utiliserons l'attribut className pour définir la classe oldStyle ci-dessus sur une nouvelle classe, c'est-à-dire newStyle -
function demoFunction() {
document.getElementById("mydiv").className = "newStyle";
}
Nous avons réalisé ce qui précède en appelant demoFunction() en cliquant sur le bouton suivant -
<p>Click the below button to change the class</p> <button onclick="demoFunction()">Change Class</button>
Exemple
Voyons l'exemple complet -
<!DOCTYPE html>
<html>
<style>
.oldStyle {
background-color: yellow;
padding: 5px;
border: 2px solid orange;
font-size: 15px;
}
.newStyle {
background-color: green;
text-align: center;
font-size: 25px;
padding: 7px;
}
</style>
<body>
<h1>Changing the class</h1>
<p>Click the below button to change the class</p>
<button onclick="demoFunction()">Change Class</button>
<div id="mydiv" class="oldStyle">
<p>The div...</p>
</div>
<script>
function demoFunction() {
document.getElementById("mydiv").className = "newStyle";
}
</script>
</body>
</html>
Basculez entre les anciennes et les nouvelles catégories
Exemple
Nous pouvons également créer un bouton qui fonctionne dans les deux sens, c'est-à-dire basculer. Cliquer à nouveau sur le bouton le ramène -
<!DOCTYPE html>
<html>
<style>
.oldStyle {
background-color: yellow;
padding: 5px;
border: 2px solid orange;
font-size: 15px;
}
.newStyle {
background-color: green;
text-align: center;
font-size: 25px;
padding: 7px;
}
</style>
<body>
<h1>Toggle the class</h1>
<p>Click the below button to toggle the classes</p>
<button onclick="demoFunction()">Toggle Class</button>
<div id="mydiv" class="oldStyle">
<p>The div...</p>
</div>
<script>
function demoFunction() {
const element = document.getElementById("mydiv");
if (element.className == "oldStyle") {
element.className = "newStyle";
} else {
element.className = "oldStyle";
}
}
</script>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!