Detaillierte Erläuterung der Schritte zum Festlegen von Elementstilen in js

Dieses Mal werde ich Ihnen die Schritte zum Festlegen von Elementstilen in js ausführlich erläutern. Was sind die Vorsichtsmaßnahmen zum Festlegen von Elementstilen in js?

Viele Leute wissen nicht, wie man den Elementstil bei der Entwicklung von js festlegt. In diesem Artikel finden Sie ein Tutorial zur js-Einstellung, damit jeder besser verstehen kann, wie man js einrichtet Interessiert, werfen wir einen Blick unten.

Wenn Sie diesen Titel sehen, denken Sie vielleicht als Erstes daran, eine Routine wie „[element].style.[css attribute name] = [attribute value]“ zu verwenden, um den Elementstil festzulegen, aber tatsächlich haben wir das getan andere Möglichkeiten, es zu tun.

Als Nächstes werde ich drei Möglichkeiten zum Stilisieren von Elementen detailliert beschreiben.

1. Stil

Dies ist eigentlich eine Methode, mit der wir zum Beispiel vertraut sind~~

<p id="box"></p>

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";

Diese Methode erscheint einfach und grob, aber die Schreibmethode ist zu umständlich, insbesondere wenn viele Stile hinzugefügt werden müssen. Und es sollte beachtet werden, dass CSS-Eigenschaftsnamen, die Bindestriche verwenden, in Kamel-Schreibweise umgewandelt werden müssen. (wie im Beispiel „backgroundColor“)

2. style.cssText

Diese Methode ist prägnanter als die obige Methode und ähnelt eher dem Schreiben von CSS direkt auf das Element:

[Element].style.cssText = [CSS-Stil];

Zum Beispiel:

box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

Tatsächlich ist die Schreibmethode sehr praktisch.

Der Nachteil besteht jedoch darin, dass später auf diese Weise hinzugefügte Stile die zuvor über das style-Attribut angegebenen Stile überschreiben.

Es ist das gleiche Beispiel wie oben, aber schreiben Sie einfach zwei JS-Teile zusammen:

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

Wenn Sie den Merkmalen des Cascading Stylesheets folgen, sollte die oben definierte rote Hintergrundfarbe weiterhin vorhanden sein. Tatsächlich überschreibt der unten über die Methode style.cssText definierte Stil jedoch alle über den Stil hinzugefügten Stile (einschließlich style.cssText). ) Methode. Daher ist das endgültige Leistungsergebnis dieses Beispiels das gleiche wie das obige, wenn nur ein Satz vorhanden ist

Bitte achten Sie abschließend auf die Kompatibilität. IE8 und frühere Versionen unterstützen CSSText nicht.

3. insertRule()

Diese Verwendung ist komplizierter als die beiden oben genannten Methoden:

[sheet].insertRule([CSS-Stil], angegebene Position)

[Blatt] stellt ein Stylesheet dar, das über document.styleSheets abgerufen werden kann. Was sind also document.styleSheets? Einfach ausgedrückt bezieht es sich auf alle im Dokument angewendeten Stylesheets, einschließlich der über das Link-Tag eingeführten Stile und der durch das Style-Tag definierten Stile. Wenn es immer noch etwas schwer zu verstehen ist, geben wir ein Beispiel~~

Führen Sie zunächst das Stylesheet in der Kopfzeile ein:

<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />

Natürlich muss dieses Stylesheet tatsächlich existieren, und es spielt keine Rolle, auch wenn keine Stile darin geschrieben sind. Sie können das Style-Tag auch direkt verwenden. Es spielt keine Rolle, ob der Inhalt leer ist.

Verwenden Sie dann JS, um dieses Stylesheet zu erhalten:

var sheet = document.styleSheets[0];

Schließlich können wir diesem Stylesheet Stile hinzufügen:

sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

Die Größe beträgt immer noch 200 * 200 und die Hintergrundfarbe ist grün, was bedeutet, dass die von style.cssText festgelegten Stile die von insertRule () festgelegten Stile überschreiben. Der Grund ist sehr einfach style.cssText) gehören zu Inline-Stilen und haben natürlich eine höhere Priorität als der durch insertRule()~~

festgelegte Stil

Worauf bezieht sich also der zweite Parameter 0 von insertRule() im Beispiel?

Es bezieht sich auf die Stelle, an der wir CSS-Code hinzufügen müssen, sodass Parameter 0 den Anfang des Stylesheets darstellt.

Beispielsweise fügen wir dem Stylesheet zunächst manuell einen Stil hinzu (das folgende Beispiel hat nichts mit dem obigen Beispiel zu tun):

<style>
  #box{ width: 100px; height: 100px;}
</style>

var sheet = document.styleSheets[0];
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

Das Ergebnis der obigen Ausführung ist eine grüne Box mit einer Breite und Höhe von 100*100:

Wenn Sie den zweiten Parameter in insertRule() auf 1 ändern, entspricht der über JS hinzugefügte CSS-Code dem Hinzufügen hinter #box{ width: 100px; height: 100px;}, ähnlich wie folgt:

<style>
  #box{ width: 100px; height: 100px;}
  #box{ width: 300px; height: 300px; background-color: #0f0;}
</style>

Es ist auch zu beachten, dass insertRule() nicht mit IE8 und früheren Versionen kompatibel ist, Sie können jedoch stattdessen addRule() verwenden. Die Syntax ist wie folgt geschrieben:

Code kopieren Der Code lautet wie folgt:

	sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);	

第一个参数代表元素，第二个参数代表CSS样式，第三个参数代表插入位置，前两个参数必选，最后一个可选，不填则默认为0。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Festlegen von Elementstilen in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!