Heim >Web-Frontend >js-Tutorial >So ändern Sie den CSS-Stil durch Klassen in js
In JavaScript können Sie die Methode setAttribute() verwenden, um den CSS-Stil über Klassen zu ändern. Sie müssen nur den Attributwert „class“ des angegebenen Elements ändern. Die Syntax lautet „element object.setAttribute(„class“, "neuer Klassenname") ;".
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
In JavaScript können Sie die Methode setAttribute() verwenden, um CSS-Stile über Klassen zu ändern.
Schauen wir uns das folgende Codebeispiel an:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.style1{
height: 50px;
border: 1px solid red;
}
.style2{
border: 3px dashed #AFEEEE;
padding: 10px;
}
</style>
</head>
<body>
<div id="style" class="style1">测试文本</div><br />
<input type="button" value="更改类名" onclick="changeStyle()" />
</body>
<script>
function changeStyle() {
var obj = document.getElementById("style");
obj.setAttribute("class", "style2");
}
</script>
</html>Rendering:
Beschreibung: Die Methode
setAttribute() fügt das angegebene Attribut hinzu und weist ihm den angegebenen Wert zu.
Setzt/ändert den Wert nur, wenn diese angegebene Eigenschaft bereits vorhanden ist.
Syntax
element.setAttribute(attributename,attributevalue)
| Parameter | Typ | Beschreibung |
|---|---|---|
| Attributname | String | Erforderlich. Der Name des Attributs, das Sie hinzufügen möchten. |
| Attributwert | String | Erforderlich. Der Attributwert, den Sie hinzufügen möchten. |
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo ändern Sie den CSS-Stil durch Klassen in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!