スタイルシートへのアクセス方法 - 背景色／文字色／文字サイズ -

　すでに何度かスタイルシートを操作するサンプルが登場していますが、ここではJavaScriptからスタイルシートにアクセスする方法について説明します。スタイルシートに関しては数多くの本やWeb上での情報がありますので、分からない方はGoogleで検索して調べてみてください。
　スタイルシートは見た目を指定するためのプロパティ（スタイルシートプロパティ）が数多く用意されています。W3Cで規定されているものだけでなく、ブラウザ独自のプロパティも存在します。ブラウザ独自のものでよく見かけるのは半透明で表示するものです。これはInternet Explorer とFirefoxとSafariがサポートしていますが、いずれも異なるプロパティ名になっています。これは後の項で説明します。

　まず、標準的なプロパティにアクセスするには、アクセスするプロパティ名に注目します。ここでは例として背景色を示すbackground-colorプロパティで説明します。スタイルシートのプロパティ名はbackground-colorプロパティのように-（ハイフン）が入っているものとcolorのように-（ハイフン）がないものがあります。ハイフンがないプロパティの場合には、以下のようにそのままプロパティ名を記述します。

対象オブジェクト.style.color

　これに対してスタイルシートプロパティ名に-（ハイフン）が入っているものは-（ハイフン）を取り、直後の英文字を大文字にします。background-colorプロパティであれば以下のようになります。

対象オブジェクト.style.backgroundColor

　ブラウザ独自のもの以外（つまりW3C標準）は、この規則に従います。これだけ覚えておけば、どのスタイルシートプロパティにもアクセスすることができます。
　それでは実際に見てみましょう。以下のサンプルは古くから行われてきた背景色を変更するスクリプトです。bgColorはbodyタグのbgcolor属性を示します。属性に値を設定することで背景色が変わるわけです。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>背景色を変更する（古い方法）</title>
<script type="text/javascript"><!--
function setbgColor()
{
document.body.bgColor = "yellow";
}
// --></script>
</head>
<body>
<h1>背景色を変更する（古い方法）</h1>
<form>
<input type="button" value="変更する" onClick="setbgColor()"><br>
</form>
</body>
</html>

　このスクリプトをスタイルシートプロパティにアクセスする形式に変更します。bgColorの代わりにstyle.backgroundColorにします。実際のサンプルは以下のようになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>背景色を変更する（スタイルシート使用）</title>
<script type="text/javascript"><!--
function setbgColor()
{
document.body.style.backgroundColor = "yellow";
}
// --></script>
</head>
<body>
<h1>背景色を変更する（スタイルシート使用）</h1>
<form>
<input type="button" value="変更する" onClick="setbgColor()"><br>
</form>
</body>
</html>

　ところで、同じ背景色が変化するのだから、標準に従ってわざわざ長く記述したりする必要はないのでは？と思う人がいるかもしれません。確かに見た目にはページの背景色が変化します。しかし、ページの背景色ではなく段落の背景色を変更したり、テキストフィールドの背景色を変更したい場合には困ってしまいます。何が困るかというと、背景色を指定するための属性名（プロパティ名）が不統一だったり、存在しなかったりするためです。属性名が不統一なのはHTMLの過去の経緯／歴史の都合というもので、いまさらどうしようもありません。また、設定すべきHTMLの属性が存在しなければ変更のしようがありません。
　これに対してスタイルシートは、ほぼ全てのタグに対して同じプロパティ名で指定することができます。つまりbodyタグでもdivタグでも全く同じように記述できます。これはプログラムを作成する側にとっては非常に楽です。タグごとにプログラムを分ける必要がないからです。実際のサンプルを見てみましょう。以下のサンプルでは１つの関数で、いろいろなタグの背景色を設定しています。（実際のサンプルを見る）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>背景色を変更する（スタイルシート使用2）</title>
<script type="text/javascript"><!--
function setbgColor(targetObj)
{
targetObj.style.backgroundColor = "yellow";
}
// --></script>
</head>
<body>
<h1>背景色を変更する（スタイルシート使用2）</h1>
<form>
<input type="button" value="ドキュメントの背景色を変更する" onClick="setbgColor(document.body)"><br>
<input type="button" value="フォームの背景色を変更する" onClick="setbgColor(this.form)"><br>
<input type="button" value="このボタンの背景色を変更する" onClick="setbgColor(this)"><br>
<input type="button" value="下の段落の背景色を変更する" onClick="setbgColor(document.getElementById('footer'))"><br>
</form>
<p id="footer">最下部の段落です。</p>
</body>
</html>

　ちなみに背景色をなくす＝透明にするにはtransparentを指定します。（実際のサンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>背景色を変更する（透明）</title>
<script type="text/javascript"><!--
function setbgColor(col)
{
document.getElementById("paragraph").style.backgroundColor = col;
}
// --></script>
</head>
<body bgcolor="cyan">
<h1>背景色を変更する（透明）</h1>
<form>
<input type="button" value="オレンジ色に変更する" onClick="setbgColor('orange')"><br>
<input type="button" value="透明色に変更する" onClick="setbgColor('transparent')"><br>
</form>
<p id="paragraph">段落のサンプルです</p>
</body>
</html>

　背景色だけでなく文字色も変更することができます。文字色を示すプロパティ名はcolorなので以下のように指定します。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>文字色を変更する（スタイルシート使用）</title>
<script type="text/javascript"><!--
function setbgColor(targetObj)
{
targetObj.style.color = "red";
}
// --></script>
</head>
<body>
<h1>文字色を変更する（スタイルシート使用）</h1>
<form>
<input type="button" value="ドキュメントの文字色を変更する" onClick="setbgColor(document.body)"><br>
<input type="button" value="このボタンの文字色を変更する" onClick="setbgColor(this)"><br>
<input type="button" value="下の段落の文字色を変更する" onClick="setbgColor(document.getElementById('footer'))"><br>
</form>
<p id="footer">最下部の段落です。</p>
</body>
</html>

　colorプロパティやbackgroundColorプロパティなど色を指定するプロパティの場合、直接色の名前を指定したり、16進数でカラーコードを指定する以外にrgb()を使った指定もできます。これはスタイルシートでの指定方法が、そのままJavaScriptでも使えるということです。以下が実際のサンプルになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>文字色を変更する（スタイルシート使用）</title>
<script type="text/javascript"><!--
function setbgColor(targetObj)
{
targetObj.style.color = "rgb(255,0,0)";
}
// --></script>
</head>
<body>
<h1>文字色を変更する（スタイルシート使用）</h1>
<form>
<input type="button" value="ドキュメントの文字色を変更する" onClick="setbgColor(document.body)"><br>
<input type="button" value="このボタンの文字色を変更する" onClick="setbgColor(this)"><br>
<input type="button" value="下の段落の文字色を変更する" onClick="setbgColor(document.getElementById('footer'))"><br>
</form>
<p id="footer">最下部の段落です。</p>
</body>
</html>

　次に文字サイズを変更してみましょう。文字サイズを示すプロパティ名はfont-sizeです。プロパティ名に-（ハイフン）が入っているのでJavaScriptでアクセスする場合にはfontSizeになります。文字サイズを指定する際には単位も付加する方が安全です。（実際のサンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>文字サイズを変更する（スタイルシート使用）</title>
<script type="text/javascript"><!--
function setbgColor(targetObj)
{
targetObj.style.fontSize = "24pt";
}
// --></script>
</head>
<body>
<h1>文字サイズを変更する（スタイルシート使用）</h1>
<form>
<input type="button" value="ドキュメントの文字サイズを変更する" onClick="setbgColor(document.body)"><br>
<input type="button" value="このボタンの文字サイズを変更する" onClick="setbgColor(this)"><br>
<input type="button" value="下の段落の文字サイズを変更する" onClick="setbgColor(document.getElementById('footer'))"><br>
</form>
<p id="footer">最下部の段落です。</p>
</body>
</html>

　このようにアクセスするプロパティ名が分かっていて、設定する形式が決まれば簡単にアクセスすることができます。しかし、上記サンプルなどもそうですが、スタイルシートでアクセスしたから全てのブラウザで同じ結果が得られるとは限りません。フォントや文字サイズ、どの範囲まで適用されるのかが異なっているためです。Safariではフォームのボタン関連などはインターフェースの都合上、全くスタイルが適用されないことが多々あります。スタイルシートには結構、落とし穴がありますので、より多くのブラウザで動作確認するのがよいでしょう。特に注意しないといけないのは、Internet Explorerを基準としてAjaxプログラムを作成してしまうことです。これは絶対にやってはいけません。Internet Explorerを基準としてしまうと、他のブラウザと互換性をとるのが難しくなってしまうためです。基準とするならばFirefoxとして、その後、Opera、Safariとチェックします。これらは、基本的にW3Cに従っているので同じように動作します。その後でInternet Explorerに対応させるのが良いでしょう。多くのブラウザで動作確認することでノウハウもたまっていくはずです。

　やや、最後は雑談気味になってしまいましたが、次項ではスタイルシートでの位置指定について説明します。

[第五章　7:スタイルシートへのアクセス方法 - 位置指定 -へ]
[目次へ]

(2006.1.13)