uhyohyo.net

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

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

このページの最終更新日：

今回は、スタイルシートの変更について解説します。といっても、簡単な表面部分だけです。また、今回スタイルシートというのは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"のように、ハイフンを無くして、ハイフンの直後の文字を大文字にして書きます。