Kopieren Sie den Codecode wie folgt:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Tag
{
Hintergrundfarbe:Weiß;
}
.Nacht
{
Hintergrundfarbe: Schwarz
}
</style>
<script language="javascript" type="text/javascript">
Funktion operStyle() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "day") {
divObj.className = "Nacht";
btnObj.value = "Mach das Licht an";
} anders {
divObj.className = "Tag";
btnObj.value = „Mach das Licht aus“;
}
}
// Batch-Änderung der Stilattribute von Divs, die aus mehreren Stilen bestehen
//Methode 1:
Funktion methodOne() {
var divObj = document.getElementById("divTest");
divObj.style.backgroundColor = "blue";
divObj.style.border = "solid 1px red";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.backgroundPosition = "center";
}
//Methode 2:
Funktion methodTwo() {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "background-color:Blue; border:solid 1px red; width:300px; height:200px; background-position:center";
}
</script>
</head>
<Körper>
<form id="form1" runat="server">
<div id="divContent">
<font color="red">Ich bin ein Div, bah bah bah! </font>
</div>
<input type="button" value="Licht ausschalten" id="btnCommit" onclick="operStyle();" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<h1>Ändern Sie den Stil von divTest und bedienen Sie mehrere Attribute</h1>
<div id="divTest" >
<font color="red">Ändern Sie den Stil von divTest</font>
</div>
<input type="button" value="Den Stil von divTest ändern" onclick="methodTwo()" />
</form>
</body>
</html>
Wenn wir CSS-Stile mit js schreiben, verwenden wir normalerweise die folgenden zwei Methoden:
Wenn wir js verwenden, um den Stil eines Elementobjekts festzulegen, verwenden wir im Allgemeinen dieses Formular:
Kopieren Sie den Codecode wie folgt:
var element= document.getElementById("id");
element.style.width=“20px“;
element.style.height=“20px“;
element.style.border=“solid 1px rot“;
Die obige Methode hat jedoch einen Nachteil: Wenn mehr Stile vorhanden sind, ist eine Menge Code erforderlich. Das Überschreiben des Objektstils durch JS ist ein typischer Prozess, bei dem der ursprüngliche Stil zerstört und neu erstellt wird den Overhead des Browsers erhöhen.
Es gibt eine CSSText-Methode in js:
Die Syntax lautet: obj.style.cssText("style");
Wir können den obigen Code wie folgt ändern:
Kopieren Sie den Codecode wie folgt:
element.style.cssText=“width:20px;height:20px;border:solid 1px red;“;
Mit dieser Schreibmethode kann versucht werden, mehrere Seitenumbrüche zu vermeiden und die Seitenleistung zu verbessern.