ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript_javascript のヒントで CSS プロパティにアクセスするいくつかの方法の紹介
JavaScript_javascript のヒントで CSS プロパティにアクセスするいくつかの方法の紹介
- WBOYオリジナル
- 2016-05-16 16:41:291505ブラウズ
一般に、JavaScript が CSS プロパティにアクセスするには、「要素を介したアクセス」と「スタイル シートへの直接アクセス」の 2 つの方法があります。さらに、スタイルにアクセスするときに無視できない問題、つまりランタイム スタイルがあります。
1. 要素を通じて
にアクセスします。要素を通じてスタイルシートにアクセスしたいので、最初にそれがどの要素であるかを判断する必要があります。これは DOM の内容なので、ここでは詳しく説明しません。参照を取得した後は、「reference.style.アクセスする属性」を通じて属性にアクセスできます。たとえば、次のコードを考えてみましょう。
<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>
#a の背景色を取得したい場合は、 document.getElementById("a").style.backgroundColor; これでアクセスが完了します。属性値を返すか変更するかはあなた次第です。 。
2. スタイルシートに直接アクセスします
スタイル シートに直接アクセスするということは、通常、「最初に対応するスタイル ブロックを見つけ、次にスタイル ブロック内で対応するスタイル ルールを見つけ、最後にスタイル ルール内で対応するスタイルを見つける」ことを意味します。
まず、スタイルブロックについて話しましょう。コードでは、CSS コードは c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 タグの間、または c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 内に存在します。コード内には複数のコード ブロックが上から下に配置されている場合があり、配列要素のようにスタイル ブロックにアクセスできます。たとえば、最初のスタイル ブロックにアクセスしたい場合は、 document.styleSheets[0]
を実行できます。では、スタイルのルールは何ですか。まず次のコードを見てください
<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>
#a と #b のスタイルはそれぞれコード内で指定されます。#a スタイルのコレクションまたは #b のコレクションはスタイル ルールです。このスタイル ブロックでは、最初のスタイル ルールは #a 用であり、2 番目のスタイル ルールは #b 用です。配列要素と同じようにスタイル ルールにアクセスすることもできます。たとえば、#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;
width:100px;
color:red;
}
#b{
height:100px;
width: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」にアクセスできます。ランタイム スタイルにアクセスする別の方法として、 document.getElementById("b").currentStyle.color がありますが、この書き方は IE でのみサポートされています。