Kann Javascript den Stil einer Webseite ändern?

Javascript kann den Stil der Webseite ändern: 1. Verwenden Sie die Anweisung „Element Object.style.cssTest="Style Value"", um sie zu ändern. 2. Verwenden Sie die Anweisung „Element Object.setAttribute("class", „value“)“-Anweisung, um sie zu ändern. ;3. Ändern Sie den Webseitenstil, indem Sie die externe CSS-Datei ändern.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Javascript kann den Stil von Webseiten ändern.

In Javascript können Sie den Stil der Webseite ändern, indem Sie den CSS-Code dynamisch ändern.

So ändern Sie CSS-Code mit Javascript

1. Verwenden Sie setAttribute(), um den Klassennamen des Stylesheets zu ändern.

2. Verwenden Sie den CSSTest des Stilobjekts, um das eingebettete CSS zu ändern.

3. Ändern Sie das CSS des Elements, indem Sie die externe CSS-Datei ändern

Beispiel:

Das Folgende ist ein Teil des HTML-Codes und des CSS-Codes, um den Unterschied zwischen den oben genannten Methoden zu erklären.

CSS

.style1 {
    margin: 10px auto;
    background - color: #9999FF;
    display: block;
    color: White;
    border: 1px solid white;
    padding: 10px 25px;
    font - size: 18px;
}
.style1: hover {
    background - color: #66B3FF;
    cursor: pointer;
}
.style2 {
    margin: 10px auto;
    background - color: gray;
    display: block;
    color: black;
    border: 1px solid white;
    padding: 10px25px;
    font - size: 18px;
}
.style2: hover {
    background - color: black;
    color: White;
    cursor: pointer
}

HTML-Code:

<div>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div id="tool">
    <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()" />
    <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
    <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
    <input type="button" value="更改外联css样式" onclick="recover()" /></div>
</div>

Methode eins, verwenden Sie obj.style.cssTest, um das eingebettete CSS zu ändern

function changeStyle2() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = " display:block;color:White;
 
}

Methode zwei, verwenden Sie bj.setAttribute, um den Klassennamen des Stylesheets zu ändern

Verwenden Sie Code, um den Klassennamen des BtB-Referenzstils zu ändern, z. B. den folgenden Codeausschnitt:

function changeStyle3() {
  var obj = document.getElementById("btnB");
  //obj.className = "style2";
  obj.setAttribute("class", "style2");
}

Ändern Sie den Stil, indem Sie den Klassennamen des BtB-CSS ändern. Es gibt zwei Möglichkeiten, den Stilklassennamen zu ändern. 1. obj.className = "style2"; 2. obj.setAttribute("class", "style2");

CSS auf diese Weise zu ändern ist viel besser als oben.

Methode 3: Ändern Sie die CSS-Datei des externen Links, um das CSS des Elements zu ändern.

Ändern Sie den Stil von btB, indem Sie die Referenz der externen CSS-Datei ändern. Der Code lautet wie folgt:

Zuerst müssen Sie die externe CSS-Datei zitieren. Der Code lautet wie folgt:

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
 
function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
 }

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Das obige ist der detaillierte Inhalt vonKann Javascript den Stil einer Webseite ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!