Einführung in verschiedene Möglichkeiten zum Zugriff auf CSS-Eigenschaften in JavaScript

Einführung in verschiedene Möglichkeiten zum Zugriff auf CSS-Eigenschaften in JavaScript_Javascript-Tipps

WBOY

Freigeben： 2016-05-16 16:41:29

Original

1406 Leute haben es durchsucht

Im Allgemeinen gibt es für JavaScript zwei Möglichkeiten, auf CSS-Eigenschaften zuzugreifen: „Zugriff über Elemente“ und „direkter Zugriff auf Stylesheets“. Darüber hinaus gibt es ein Problem, das beim Zugriff auf Stile nicht ignoriert werden kann: Laufzeitstile.

1. Zugriff

über Elemente

Da Sie über Elemente auf das Stylesheet zugreifen möchten, sollten Sie zunächst feststellen, um welches Element es sich handelt. Dies ist der Inhalt des DOM, daher werde ich hier nicht auf Details eingehen. Nachdem Sie die Referenz erhalten haben, können Sie über „reference.style.attribute to be access“ auf ein Attribut zugreifen. Betrachten Sie beispielsweise den folgenden Code.

<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
</body> 
</html>

Nach dem Login kopieren

Wenn wir die Hintergrundfarbe von #a erhalten möchten, können wir document.getElementById("a").style.backgroundColor; Damit ist der Zugriff abgeschlossen. Es liegt an Ihnen, ob Sie den Attributwert zurückgeben oder ändern möchten . .

2. Greifen Sie direkt auf das Stylesheet zu

Der direkte Zugriff auf das Stylesheet bedeutet im Allgemeinen: „Suchen Sie zuerst den entsprechenden Stilblock, dann die entsprechende Stilregel im Stilblock und schließlich den entsprechenden Stil in der Stilregel.“

Lassen Sie uns zunächst über Stilblöcke sprechen. Im Code wird der CSS-Code zwischen den Tags vorhanden sein. Ein Der Code kann mehrere von oben nach unten angeordnete Codeblöcke enthalten, und wir können auf den Stilblock wie auf ein Array-Element zugreifen. Wenn wir beispielsweise auf den ersten Stilblock zugreifen möchten, können wir document.styleSheets[0]

verwenden

Was sind dann die Stilregeln? Schauen Sie sich zunächst den folgenden Code an

<pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
#b{ 
height:100px; 
width:100px; 
background-color:blue; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
<div id="b"></div> 
</body> 
</html>

Nach dem Login kopieren

Die Stile von #a und #b werden jeweils im Code angegeben. Die Sammlung von #a-Stilen oder die Sammlung von #b ist eine Stilregel. In diesem Stilblock gilt die erste Stilregel für #a und die zweite Stilregel für #b. Wir können auch auf Stilregeln zugreifen, genau wie auf Array-Elemente. Wenn wir beispielsweise auf #b-Stilregeln zugreifen möchten, können wir document.styleSheets[0].cssRules[1] verwenden. Natürlich können Sie document.styleSheet[0].rules[1] auch so schreiben: Diese Schreibweise wird jedoch von Firefox nicht unterstützt.

Dann können wir auf die entsprechenden Stile zugreifen. Wenn wir beispielsweise die Hintergrundfarbe von #b in Grün ändern möchten, können wir document.styleSheets[0].cssRules[1].style.backgroundColor="green";

verwenden

3. Laufzeitstil

Sehen Sie sich den folgenden Code an:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
color:red; 
} 
#b{ 
height:100px; 
width:100px; 
} 
</style> 
</head> 
<body> 
<div id="a"> 
<div id="b">观察字体颜色</div> 
</div> 
</body> 
</html>

Nach dem Login kopieren

Wenn wir „alert(document.getElementById("b").style.color); ausführen, stellen wir fest, dass im Popup-Fenster nichts ausgegeben wird, aber die Schriftfarbe der Seite eindeutig rot ist. Dies liegt daran, dass die Stilobjekteigenschaften jedes Elements nicht sofort aktualisiert werden. Wenn wir im Popup-Fenster Rot ausgeben möchten, müssen wir den Laufzeitstil verwenden. window.getComputedStyle(document.getElementById("b"),null).color Auf diese Weise können Sie auf „rot“ zugreifen. Es gibt eine andere Möglichkeit, auf den Laufzeitstil zuzugreifen: document.getElementById("b").currentStyle.color, aber diese Schreibweise wird nur vom IE unterstützt.