Heim  >  Artikel  >  Web-Frontend  >  So ändern Sie CSS in JS

So ändern Sie CSS in JS

coldplay.xixi
coldplay.xixiOriginal
2021-04-16 14:48:178825Durchsuche

So ändern Sie CSS in js: 1. Verwenden Sie [obj.style.cssTest], um das eingebettete CSS zu ändern. 2. Verwenden Sie [bj.className], um den Klassennamen des Stylesheets zu ändern css-Datei, wodurch das CSS des Elements geändert wird.

So ändern Sie CSS in JS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So ändern Sie CSS in JS:

Methode 1. Verwenden Sie obj.style.cssTest, um eingebettetes CSS zu ändern

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

Methode 2. Verwenden Sie bj.className, um den Klassennamen des Stylesheets zu ändern

Verwenden Sie Code, um den Klassennamen des btB-Referenzstils zu ändern, wie im folgenden Codeausschnitt gezeigt:

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");

Die Verwendung dieser Methode zum Ändern von CSS hat einen viel besseren Effekt als die oben genannten.

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");
 }

Empfohlene verwandte Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie CSS in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:So löschen Sie Stile in CSSNächster Artikel:So löschen Sie Stile in CSS