Das Attribut
className wird verwendet, um die Klasse eines Elements zu ändern. Hier sehen wir zwei Beispiele -
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>
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> 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!
