uhyohyo.net

JavaScript初級者から中級者になろう

二章第十一回 スタイルシートの操作

今回は、スタイルシートの変更について解説します。といっても、簡単な表面部分だけです。また、今回スタイルシートというのはCSSのことです。JavaScriptでは、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要素の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"のような場合、JavaScriptでは変数名やプロパティ名にハイフンを使えないため、"backgroundColor"のように、ハイフンを無くして、ハイフンの直後の文字を大文字にして書きます。