スタイルシートにアクセスする

説明

JavaScriptでは定義されたスタイルシートプロパティ値にアクセスする方法がいくつか用意されています。HTMLタグのstyle属性に直接指定されたものは「style.プロパティ名」として参照／設定することができます。このアクセス方法は古いブラウザでも利用することができます。
HTMLタグでstyle属性が指定されていない場合にはdocument.defaultView.getComputedStyle()により実際に表示されている値を読み出すことができます。読み出すプロパティ名はgetPropertyValue()で指定します。ただし、この方法はDOMが利用できないブラウザや古いブラウザでは利用できません。また、Internet Explorerの場合は、この方法ではなくHTMLタグオブジェクトのcurrentStyle.getAttribute()を使ってプロパティ値を読み出します。
別ファイルで定義されたスタイルシートプロパティ値を読み出すにはdocument.styleSheets.item()を使います。item()のパラメータには読み出すスタイルシートの順番を指定します。この順番は最初が0番になります。このスタイルシートから読み出すセレクタをcssRules.item()を使って読み出す位置を指定します。Internet Explorerの場合は、rules.item()を使います。ここで読み出されるプロパティ値は画面に表示されているものではなく、実際にファイル内に定義された値になるということに注意してください。状況に応じて、どのスタイルシートプロパティ値を読み出したのか把握しておく必要があります。また、読み出される値はブラウザによって異なり16進値で返すものもあれば、定義したカラー名 (redなど) を、そのまま返すものもあるので注意が必要です。
JavaScriptでスタイルシートのプロパティを指定する場合には、colorやpositionなどのようにそのまま指定できるものとそうでないものがあります。例えばスタイルシートで背景色を示すプロパティはbackground-colorですが、JavaScriptではこのまま指定することはできません。この場合、プロパティ名から-（ハイフン）を削除し直後の文字を大文字にしたものを指定します。background-colorであればbackgroundColorとなります。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>スタイルシートにアクセスする</h1>
<form action="./getcss.cgi" method="get" name="mainForm">
<input type="button" id="getButton1" value="box1の実際の文字色を表示">
<input type="button" id="getButton2" value="box1の外部CSSでの値を表示">
<input type="button" id="getButton3" value="box1のcolorのstyle属性値を表示">
</form>
<div id="result"></div>
<div id="box1" style="color:red">ここのスタイルシートを読み出すことができます</div>
</body>
</html>
window.onload = function(){
document.getElementById("getButton1").onclick = function(){
var col;
var divTag = document.getElementById("box1");
if (document.defaultView){
col = document.defaultView.getComputedStyle(divTag, null).getPropertyValue("color");
}
if (divTag.currentStyle){
col = divTag.currentStyle.getAttribute("color");
}
document.getElementById("result").innerHTML = col;
}
document.getElementById("getButton2").onclick = function(){
var cssValue;
var divTag = document.getElementById("box2");
var cssRoot = document.styleSheets.item(0);
if (cssRoot.cssRules){
cssValue = cssRoot.cssRules.item(3).style.color;
}
if (cssRoot.rules){
cssValue = cssRoot.rules.item(3).style.color;
}
document.getElementById("result").innerHTML = cssValue;
}
document.getElementById("getButton3").onclick = function(){
var divTag = document.getElementById("box1");
document.getElementById("result").innerHTML = divTag.style.color;
}
}