JavaScript_javascript のヒントで CSS プロパティにアクセスするいくつかの方法の紹介-jsチュートリアル-php.cn

JavaScript_javascript のヒントで CSS プロパティにアクセスするいくつかの方法の紹介

WBOY

リリース： 2016-05-16 16:41:29

オリジナル

1508 人が閲覧しました

一般に、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 コードはタグの間、または内に存在します。コード内には複数のコードブロックが上から下に配置されている場合があり、配列要素のようにスタイルブロックにアクセスできます。たとえば、最初のスタイルブロックにアクセスしたい場合は、 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 でのみサポートされています。