一般に、JavaScriptがCSSプロパティにアクセスするには、「要素からのアクセス」と「スタイルシートに直接アクセス」という2つの方法があります。さらに、スタイルにアクセスするときに無視することはできない問題があります - ランタイムスタイル。
1。要素を介してアクセスします
要素を介してスタイルシートにアクセスしたいので、まずそれがどの要素であるかを決定する必要があります。これはDOMのコンテンツなので、ここでこれについては言わないでしょう。参照を取得した後、「reference.style。属性への属性」を介して特定の属性にアクセスできます。たとえば、次のコードを参照してください。
<pre name = "code"> <pre name = "code"> <！doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {height：100px;幅：100px;背景色：赤; } </style> </head> <body> <div id = "a"> </div> </body> </html>＃aの背景色を取得したい場合は、document.getElementById（ "a"）。style.backgroundcolor;これにより、アクセスが完了します。その後、属性値を返すか変更するかどうかにかかわらず、それはあなた次第です。
2。スタイルシートへの直接アクセス
一般に、スタイルシートへの直接アクセスは「最初に対応するスタイルブロックを見つけてから、スタイルブロックで対応するスタイルルールを見つけ、最後にスタイルルールで対応するスタイルを見つけます。」
どのスタイルブロックが最初にあるかについて話しましょう。コードでは、CSSコードは<style> </style>タグまたは<link>の間に存在し、<style> </style>または<link>はスタイルブロックです。コードでは、複数のコードブロックを上から下まで順番に配置でき、配列要素にアクセスするようなスタイルブロックにアクセスできます。たとえば、スタイルブロックの最初のものにアクセスしたい場合は、document.stylesheets [0]を記録できます。
次に、スタイルルールとは何かを言います。まず、次のコードを見てください
<pre name = "code"> <！doctype html> <html> <head> <meta charset = "utf-8"> <style>＃a {height：100px;幅：100px;背景色：赤; } #b {height：100px;幅：100px;背景色：青; } </style> </head> <body> <div id = "> </div> <div id =" b "> </div> </body> </html>コードは、それぞれ＃aと#bのスタイルを指定します。 ＃aまたは＃bのコレクションのスタイルのコレクションは、スタイルルールです。このスタイルブロックでは、＃Aの最初のスタイルルールと#Bの2番目のスタイルルール。また、配列要素にアクセスできるようにスタイルルールにアクセスすることもできます。たとえば、#Bスタイルのルールにアクセスしたい場合は、document.stylesheets [0] .cssrules [1]を作成できます。もちろん、document.stylesheet [0] .rules [1]を作成することを選択できますが、この執筆方法はFirefoxによってサポートされていません。
その後、対応するスタイルにアクセスできます。たとえば、＃bの背景色を緑に変更する場合は、document.stylesheets [0] .cssrules [1] .style.backgroundcolor = "green";
3。ランタイムスタイル
次のコードを見てください。
<！doctype html> <html> <head> <meta charset = "utf-8"> <style>＃a {height：100px;幅：100px;色：赤; } #b {height：100px;幅：100px; } </style> </head> <body> <div id = "a"> <div id = "b">フォント色</div> </div> </body> </html>Alert（document.getElementById（ "b"）。style.color）を実行すると、ポップアップウィンドウに出力は何もありませんが、ページのフォント色は明らかに赤です。なぜ？これは、各要素のスタイルオブジェクト属性が即座に更新されないためです。ポップアップウィンドウに赤を出力したい場合は、ランタイムスタイルを使用する必要があります。 window.getComputedStyle（document.getElementById（ "b"）、null）.color「red」にアクセスできるように。 Runtime Style Document.getElementById（ "B"）。CurrentStyle.Colorにアクセスする別の方法がありますが、この方法はIEによってのみサポートされています。