So legen Sie CSS in Javascript fest

So legen Sie CSS mit JavaScript fest: 1. Legen Sie das Stilobjekt direkt über den Inline-Stil fest. 2. Legen Sie das Stilattribut fest, indem Sie einen globalen Stil hinzufügen. 3. Verwenden Sie JavaScript, um die Klassen „add()“ und „remove(“ hinzuzufügen. )“, um CSS festzulegen.

Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript 1.8.5 und HTML5- und CSS3-Version, Dell G3-Computer.

Javascript legt den CSS-Stil fest

1. Legen Sie das Stilobjekt direkt fest (Inline-Stil)

Der einfachste Weg, den Stil eines Elements mithilfe von JavaScript festzulegen, ist die Verwendung des Stilattributs. 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 Schrift- und Hintergrundfarbe eines 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: Hintergrundfarbe) anstelle von Bindestrichen (Hintergrundfarbe). um Attributnamen darzustellen

Das Stilattribut fügt Stile inline zu einem Element hinzu:

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

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

2. Legen Sie das Stilattribut fest – fügen Sie einen globalen Stil hinzu.

Eine andere Methode besteht darin, Elemente mit CSS-Attributen in c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 einzufügen. 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 werden wir unseren Stil über innerHTML zu c9ccee2e6ea535a969eb3f532ad9fe89 hinzufügen.

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() [Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

Diese Methode beinhaltet das Hinzufügen und Entfernen von Klassenwerten, was wiederum den Anwendungsstil ändert Regeln. 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>

Wenn wir nun die Stilregel .disableMenu auf dieses Element anwenden möchten, benötigen wir „All“. Das bedeutet, dass Sie dem DropDown-Element „disableMenu“ als Klassenwert 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 Klassennamen „disableMenu“ zu unserem dropDown-Element hinzuzufügen, verwenden Sie die Methode „add()“ für das Attribut „classList“ des HTML-Elements:

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

Um den Klassennamen „disableMenu“ zu entfernen, können wir die Methode „remove()“ der API „classList“ aufrufen :

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

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