Heim > Artikel > Web-Frontend > Wie ändere ich die Klasse eines Elements mit JavaScript?
Wie ändere ich die Klasse eines Elements mit JavaScript?
- PHPznach vorne
- 2023-08-30 14:29:041246Durchsuche
Das Attribut
className wird verwendet, um die Klasse eines Elements zu ändern. Hier sehen wir zwei Beispiele -
- So ändern Sie die Klasse eines Elements mithilfe des className-Attributs.
- So wechseln Sie zwischen alten und neuen Kursen.
Ändern Sie die Klasse eines Elements mithilfe des className-Attributs
In diesem Beispiel ändern wir die Klasse eines Elements mithilfe des className-Attributs. Nehmen wir an, wir haben ein Div mit der Klasse oldStyle -
<div id="mydiv" class="oldStyle"> <p>The div...</p> </div>
Wir werden das className-Attribut verwenden, um die obige oldStyle-Klasse auf eine neue Klasse zu setzen, d. h. newStyle -
function demoFunction() {
document.getElementById("mydiv").className = "newStyle";
}
Wir haben das Obige erreicht, indem wir demoFunction() beim Klicken auf die folgende Schaltfläche aufgerufen haben -
<p>Click the below button to change the class</p> <button onclick="demoFunction()">Change Class</button>
Beispiel
Sehen wir uns das vollständige Beispiel an -
<!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>
Wechseln Sie zwischen alten und neuen Kategorien
Beispiel
Wir können auch eine Schaltfläche erstellen, die in beide Richtungen funktioniert, d. h. umschalten. Durch erneutes Klicken auf die Schaltfläche wird es wieder zurückgeschaltet -
<!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>Das obige ist der detaillierte Inhalt vonWie ändere ich die Klasse eines Elements mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!