Es gibt im Allgemeinen zwei Möglichkeiten, wie JavaScript auf CSS -Eigenschaften zugreift: "Zugriff über Elemente" und "direkt auf Style Sheets". Darüber hinaus gibt es ein Problem, das beim Zugriff auf Stile - Laufzeitstile - nicht ignoriert werden kann.
1. Zugriff über Elemente
Da Sie über Elemente auf das Stilblatt zugreifen möchten, sollten Sie zunächst feststellen, welches Element es ist. Dies ist der Inhalt von DOM, daher werde ich hier nicht mehr darüber sagen. Nachdem Sie die Referenz erhalten haben, können Sie über "Referenz.Style. Attribut zum Zugriff" auf ein bestimmtes Attribut zugreifen. Sehen Sie sich beispielsweise den folgenden Code an.
<pre name = "code"> <pre name = "code"> <! docType html> <html> <kopf> <meta charset = "utf-8"> <style> #A {Höhe: 100px; Breite: 100px; Hintergrundfarbe: Rot; } </style> </head> <body> <div id = "a"> </div> </body> </html>Wenn wir die Hintergrundfarbe von #A erhalten möchten, können wir.GetElementById ("a") style.backgroundColor dokumentieren; Auf diese Weise ist der Zugang abgeschlossen. Danach, ob der Attributwert zurücksenden oder geändert werden soll, liegt es an Ihnen.
2. Direkter Zugriff auf das Stilblatt
Im Allgemeinen ist der direkte Zugriff auf das Stylesheet "Suchen Sie zuerst den entsprechenden Stilblock, finden Sie dann die entsprechenden Stilregeln im Stilblock und finden Sie schließlich den entsprechenden Stil in der Stilregel."
Lassen Sie uns darüber sprechen, welche Stilblöcke zuerst sind. Im Code existiert der CSS -Code zwischen den <style> </style> -Tags oder in <Link>, und ein <style> </style> oder <Link> ist ein Stilblock. Im Code können mehrere Codeblöcke von oben nach unten nacheinander angeordnet werden, und wir können auf Stilblöcke zugreifen, wie wir auf Array -Elemente zugreifen. Wenn wir beispielsweise auf den ersten im Stilblock zugreifen möchten, können wir.Stylesheets [0] dokumentieren.
Sagen Sie dann, welche Stilregeln sind. Schauen Sie sich zunächst den folgenden Code an
<pre name = "code"> <! docType html> <html> <kopf> <meta charset = "utf-8"> <style> #A {Höhe: 100px; Breite: 100px; Hintergrundfarbe: Rot; } #B {Höhe: 100px; Breite: 100px; Hintergrundfarbe: Blau; } </style> </head> <body> <div id = "a"> </div> <div id = "b"> </div> </body> </html>Der Code gibt die Stile von #A bzw. #B an. Die Sammlung der Stile von #A oder die Sammlung von #B ist eine Stilregel. In diesem Stilblock die erste Stilregel für #A und die zweite Stilregel für #B. Wir können auch auf Stilregeln zugreifen, wie wir auf Array -Elemente zugreifen können. Wenn wir beispielsweise auf die #B -Stilregeln zugreifen möchten, können wir dokumentieren.
Dann können wir auf den entsprechenden Stil zugreifen. Wenn wir beispielsweise die Hintergrundfarbe von #B in Grün ändern möchten, können wir.
3. Laufzeitstil
Schauen Sie sich den folgenden Code an:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <style> #A {Höhe: 100px; Breite: 100px; Farbe: Rot; } #B {Höhe: 100px; Breite: 100px; } </style> </head> <body> <div id = "a"> <div id = "b"> die Schriftfarbe beobachten </div> </div> </body> </html>Wenn wir Alert ausführen (document.getElementById ("B"). Style.color); wir stellen fest, dass im Popup-Fenster nichts ausgegeben wird, aber die Schriftfarbe der Seite ist offensichtlich rot. Warum? Dies liegt daran, dass die Style -Object -Attribute 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, damit Sie auf "rot" zugreifen können. Es gibt eine andere Möglichkeit, auf das Dokument im Laufzeitstil zuzugreifen.