Heim > Artikel > Web-Frontend > Einführung in verschiedene Möglichkeiten zum Zugriff auf CSS-Eigenschaften in JavaScript_Javascript-Tipps

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

WBOYOriginal: 2016-05-16 16:41:291407Durchsuche

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>

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 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 vorhanden sein. Ein c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 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>

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>

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.

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

Vorheriger Artikel：Methoden zum Deklarieren von Funktionen in JavaScript und Rückgabewerte beim Aufrufen von Funktionen_GrundkenntnisseNächster Artikel：Methoden zum Deklarieren von Funktionen in JavaScript und Rückgabewerte beim Aufrufen von Funktionen_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen