Wie stelle ich den CSS-Stil in JS ein? So ändern Sie den CSS-Stil mit js

Wie lege ich den CSS-Stil in JS fest? In diesem Artikel erfahren Sie, wie Sie CSS-Stile mit JS festlegen (ändern). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Jetzt stellen wir Ihnen vor, wie Sie den CSS-Stil mithilfe von Javascript festlegen.

1. Legen Sie den Stil direkt fest (Inline-Stil)

Der einfachste Weg, den Stil eines Elements mithilfe von JavaScript festzulegen, ist die Verwendung von Stilattribut. Für jedes HTML-Element, auf das wir über JavaScript zugreifen, gibt es ein Style-Objekt. Mit diesem Objekt können wir CSS-Eigenschaften angeben und deren Werte festlegen. Dies ist beispielsweise der Stil zum Festlegen der Schriftfarbe, Hintergrundfarbe und des Stils des HTML-Elements mit dem ID-Wert-Demo:

var myElement = document.querySelector("#demo");

// 把颜色设置成紫色
elem.style.color = 'purple';  

// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';  

// 将高度设置为150 px
elem.style.height = '150px';

Hinweis: JavaScript verwendet das Camel-Case-Prinzip ( zum Beispiel: backgroundColor) anstelle von Bindestrich Die Linie (Hintergrundfarbe) stellt den Attributnamen dar

Das Stilattribut fügt Stile inline zum Element hinzu:

<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">     
     Hello, world! 
</div>

Dies kann jedoch unser Markup sehr beeinträchtigen verwirrend. Auch die Browser-Rendering-Leistung ist schlecht.

2. Einen globalen Stil hinzufügen

Eine andere Methode besteht darin, c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 hinzuzufügen Fügen Sie Elemente mit CSS-Attributen in das DOM ein. Dies ist nützlich, wenn Sie Stile festlegen, die für eine Gruppe von Elementen gelten und nicht nur für ein einzelnes.

Zuerst erstellen wir ein Stilelement.

var style = document.createElement('style');

Als nächstes fügen wir unseren Stil zu c9ccee2e6ea535a969eb3f532ad9fe89 hinzu.

var style = document.createElement('style');
style.innerHTML =
	'.some-element {' +
		'color: purple;' +
		'background-color: #e5e5e5;' +
		'height: 150px;' +
	'}';

Zuletzt werden wir die Stile in das DOM einfügen. Dazu holen wir uns das erste Skript-Tag, das wir im DOM finden, und fügen mit insertBefore() unser Style-Tag hinzu.

// 创建我们的样式表
var style = document.createElement('style');
style.innerHTML =
	'.some-element {' +
		'color: purple;' +
		'background-color: #e5e5e5;' +
		'height: 150px;' +
	'}';

// 获取第一个脚本标记
var ref = document.querySelector('script');

// 在第一个脚本标签之前插入新样式
ref.parentNode.insertBefore(style, ref);

3. Klassen mit JavaScript hinzufügen und entfernen: add() und remove()

Diese Methode beinhaltet das Hinzufügen und Entfernen von Klassenwerten. was wiederum die angewendeten Stilregeln ändert. Nehmen wir zum Beispiel an, wir haben eine Stilregel wie diese:

.disableMenu {
    display: none;
}

In HTML haben Sie ein Menü mit der ID dropDown:

<ul id="dropDown">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Nun, wenn wir den .disableMenu-Stil ändern möchten Auf dieses Element angewendet, müssen wir lediglich „disableMenu“ als Klassenwert zum „dropDown“-Element hinzufügen:

<ul class="disableMenu" id="dropDown">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

Um mit JavaScript das gleiche Ergebnis zu erzielen, verwenden wir die classList-API. Diese API macht es sehr einfach, Klassenwerte zu HTML-Elementen hinzuzufügen oder daraus zu entfernen.

Um den Namen der DisableMenu-Klasse zu unserem DropDown-Element hinzuzufügen, verwenden Sie die add()-Methode für das classList-Attribut des HTML-Elements:

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.add("disableMenu");

Um die DisableMenu-Klasse zu entfernen Mit dem Namen können wir die remove()-Methode der classList-API aufrufen:

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.remove("disableMenu");

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Sie können verschiedene Methoden auswählen, um den CSS-Stil zu ändern je nach Situation. Ich hoffe, dass es für alle beim Lernen hilfreich sein wird: JavaScript-Tutorial!

Das obige ist der detaillierte Inhalt vonWie stelle ich den CSS-Stil in JS ein? So ändern Sie den CSS-Stil mit js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!