uhyohyo.net

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

五章第一回 計算済みスタイル

五章では、CSSの操作について詳しく解説していきます。CSSについては二章十一回で少し触れましたが、これはまだまだ序の口です。五章ではもっと詳しい中身についてやっていきます。

今回は、まずその初めとして、計算済みスタイルというものを取得することについて解説します。

計算済みスタイルとは、少し分かりにくいかもしれませんが、つまりこういうことです。次のサンプルを見てみましょう。

<!doctype html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      p { background-color: yellow; }
    </style>
  </head>
  <body>
    <p>testtest</p>

  </body>
</html>

このサンプルで、p要素の背景は黄色です。それは当然、スタイルシートでp要素のbackground-colorを黄色に設定しているからです。

ここで、pタグにはstyle属性はなく、特に何も書かれていません。しかしp要素には背景が黄色だというスタイルがちゃんと適用されています。このように、ある要素に実際に適用されるスタイルが、計算済みスタイルです。

このように、その要素に直接スタイルが書いていない場合、前紹介した方法では取得できません。ちょっと試してみましょう。

<!doctype html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      p { background-color: yellow; }
    </style>
  </head>
  <body>
    <p>testtest</p>

    <script type="text/javascript">
      var p = document.getElementsByTagName('p').item(0);

      console.log(p.style.backgroundColor);
    </script>
  </body>
</html>

空白などが表示されて、正しく取得できないと思います。これは、p要素のstyle属性に書かれているわけではないからです。言い換えると、HTMLElementのstyleプロパティでは、その要素に直接style属性で書かれているものしか取得・操作できないということになります。

そこで、実際にp要素がどんなスタイルで表示されているかを知るために、計算済みスタイルを取得することが必要になるというわけです。

それは、次のように取得します。

<!doctype html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      p { background-color: yellow; }
    </style>
  </head>
  <body>
    <p>testtest</p>

    <script type="text/javascript">
      var p = document.getElementsByTagName('p').item(0);

      var style = document.defaultView.getComputedStyle(p, null);
      console.log(style.backgroundColor);
    </script>
  </body>
</html>

defaultView、getComputedStyleという謎の単語が2つも出てきました。解説します。

このdefaultViewは、見ての通り、documentが持つプロパティです。これは、Viewというものを指しています。

Viewとは何かというと、実は自分もよく分かりません。しかしViewというだけに、何か全体とか表示とかに関わるものなのでしょう。

さて、今回は、このViewが持つメソッドを利用します。そのメソッドとは、これまた見ての通り、getComputedStyleです。

これがまさに計算済みスタイルを取得するメソッドで、引数が2つあります。1つめの引数が、対象となる要素です。今回はgetElementsByTagNameで取得したp要素を渡しています。2つめの引数は擬似要素です。これについては後述しますが、今回は擬似要素はいらないので、そういう場合にはnullにします。

これで、計算済みスタイルを表すオブジェクトが返ってきます。このオブジェクトはCSSStyleDeclarationというオブジェクトで、この種類のオブジェクトは、具体的にひとつひとつのプロパティを参照したりするのに使うものです。実は、HTMLElementが持つstyleプロパティもこのCSSStyleDeclarationの一種です。

すなわち、HTMLElementのstyleプロパティと同じように扱うことができます。だから、このサンプルでは、そのCSSStyleDeclarationが持つbackgroundColorプロパティを表示しています。

ちなみに、スタイル指定は「yellow」となっていますが、スタイル指定で表示されるのは"yellow"ではないと思います。ブラウザによって差異はありますが、"#ffff00"とか"rgb(255,255,0)"とか表示されるのではないでしょうか。このように、ソースに書いた値は、ブラウザによって解釈されてブラウザにとって扱い易い形になってブラウザに記憶されています。それを参照したとき、ブラウザは改めて文字列を作っているため、このようにもとの形と違うようになるのです。

ただ、注意する必要があるのが、getComputedStyleによって取得したスタイルは、HTMLElementのstyleとは違い、書き換えできません。あくまで見るだけです。

擬似要素

最後に、上で後述とした擬似要素について説明します。擬似要素とは、

p:first-letter{
    background-color: aqua;
}

のようなものです。

first-letterは、「最初の文字」です。このように記述すれば、最初の文字にのみ特別なスタイルを当てることができます。つまり、最初の文字とそれ以外の文字で当然見た目が、つまり計算済みスタイルが違います。そこで、ある擬似要素の計算済みスタイルを取得する方法があります。それにgetComputedStyleの第二引数を使います。

<!doctype html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      p { background-color: yellow; }
      p:first-letter{
        font-size:2em;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <p>testtest</p>

    <script type="text/javascript">
      var p = document.getElementsByTagName('p').item(0);

      var style = document.defaultView.getComputedStyle(p, ":first-letter");
      console.log(style.backgroundColor);
    </script>
  </body>
</html>

ちなみに、似た形でも、「:hover」「:visited」などは擬似クラスと呼ばれ、擬似要素ではないのでこの方法は使えません。擬似要素にあてはまるものには、「:first-letter」「:first-line」「::before」「::after」があります。

次回から、CSSの構造などについて詳しく説明していきます。