Heim  >  Artikel  >  Web-Frontend  >  So legen Sie das CSS von div in js fest

So legen Sie das CSS von div in js fest

藏色散人
藏色散人Original
2021-04-29 10:26:294341Durchsuche

So legen Sie das CSS von div in js fest: Führen Sie zuerst das JQuery-Plug-In ein. Ändern Sie dann den HTML-Stil mithilfe der CSS-Methode von JQuery oder verwenden Sie die AddClass-Methode von JQuery, um einen CSS-Stil zu HTML zu ändern oder hinzuzufügen.

So legen Sie das CSS von div in js fest

Die Betriebsumgebung dieses Artikels: Windows 7-System, JQuery-Version 1.8.3, Dell G3-Computer.

Um die Verwendung bequemer und einfacher zu gestalten, führen wir das JQuery-Plug-In ein und verwenden JQuery für den Betrieb.

So legen Sie das CSS von div in js fest

Unser HTML ist sehr einfach, nur ein Div mit einem Text darin.

So legen Sie das CSS von div in js fest

Öffnen Sie die Seite, jetzt verwendet das Div keinen CSS-Stil.

So legen Sie das CSS von div in js fest

Um den HTML-Stil zu ändern, können wir direkt die CSS-Methode von jquery verwenden:

$("#div_d").css("background-color","#0e90d2");

So legen Sie das CSS von div in js fest

Aktualisieren Sie die Seite Sehen Sie sich das aktuelle Div an. Die Hintergrundfarbe wird blau.

So legen Sie das CSS von div in js fest

Wenn mehrere CSS-Stilwerte geändert werden müssen, ist es schwieriger, das CSS direkt zu ändern und mehrere Aufrufe zu erfordern. Derzeit besteht unsere vernünftigere Methode darin, einen CSS-Stil in HTML zu ändern oder hinzuzufügen.

Verwenden Sie die addClass-Methode von jquery: $("#div_d").addClass("div_class");

So legen Sie das CSS von div in js fest

Unser CSS-Stil div_class ist wie in der Abbildung gezeigt definiert, die mehrere Stilwerte definiert.

So legen Sie das CSS von div in js fest

Sehen Sie sich noch einmal den Effekt der aktuellen Seite an. Der Stil wurde erfolgreich hinzugefügt. [Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

So legen Sie das CSS von div in js fest

Das obige ist der detaillierte Inhalt vonSo legen Sie das CSS von div in js fest. 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