二章第十一回 スタイルシートの操作
このページの最終更新日:
今回は、スタイルシートの変更について解説します。といっても、簡単な表面部分だけです。また、今回スタイルシートというのはCSSのことです。JavaScriptでは、CSSの変更がサポートされています。
ただし、CSSの書き方までは今回解説しません。CSSの基礎は知っているという前提で進めていきます。
要素のスタイルを変更する
今回解説するのは、ひとつひとつの要素のスタイルを変更することです。ひとつひとつの要素のスタイルとは、
<p style="background-color:yellow">test</p>
のように、HTMLで書く場合タグのstyle属性で書くものです。
非常に簡単で、HTMLElementがstyleというプロパティを持っています。これをいじることで、スタイルを操作できます。
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<p style="background-color:yellow">test</p>
<script type="text/javascript">
var p = document.getElementsByTagName('p').item(0);
p.style.border = "10px solid black";
</script>
</body>
</html>
これを実行すると、p要素の周りに太い枠が出来ます。これは、p要素に付加されたCSSのborderプロパティが変更されたからです。
このサンプルで、一行目で変数pにp要素を代入しています。p要素が1つしかないので、例のstyle属性を持ったp要素であることがわかります。
さて、上で紹介したstyleプロパティの、borderというプロパティを変更しています。文字列で指定します。そうすると、その内容がそのままCSSのborderプロパティに反映されます。つまり、
<p style="background-color:yellow;border:10px solid black">test</p>
というような状態になります。
つまり、HTMLElementが持つstyleの、変更したいCSSのプロパティ(今回の場合border)と同じ名前のプロパティを変更すると、それがそのまま反映されるというわけです。
ちなみに、"background-color"のような場合、"backgroundColor"のように、ハイフンを無くして、ハイフンの直後の文字を大文字にして書きます。