[Javascript] 要素のCSS値を確実に取得する”getComputedStyle”

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

真冬にアイスを食べて、真夏にホットコーヒーを飲んでいる、下駄です。
 

「css」とかけまして、
 

「現役モデル」と、ときます。
 

そのココロは・・・
 

スタイルがいいでしょう。

たまに取得したくなる要素のスタイル値

WEBサービスを作っている時に、任意の要素にどういうcssが適用されているのかを、確認したい場面がたまにあります。
 

例えば、要素を表示したり隠したりするようなケースでは、class属性に、hiddenやviewなどのkey値で対応したり、data属性に0,1のフラグで登録していればいいのに、直接styleに書き込んだり、cssファイルに任せっきりにしてしまっている場合、要素のcss値を取得したくなります。
 

他にも、cssを複数のページで使いまわしている時に、現在の親要素の”position”が”absolute”なのか”relative”なのか”fixed”なのか、ページごとに何かしらの切り替えを行っているような場合、今現在どのスタイルが適用されているかを判断したくなるような場合もあります。
 

こうした時に、htmlやjavascriptで直接書き込んである以下のようなケースであれば、簡単に取得できるのだが、
 

 

cssに書き込まれている状態の値は、なかなか取得しづらい。
 

 

このようなcssファイルに書かれている値を取得する方法って、できないかな〜と探してみたところ、
ちゃんとした命令が用意されていました。

要素のcss値の取得方法

HTMLタグのそれぞれの要素に適用されているcss値を取得する方法をいくつか紹介します。
 

1. style

要素の属性に直書きされている値であれば、style値から簡単に取得できます。
 

 

このように要素のstyleを取得してみると・・・
 

 

という風に、無駄な値も含めてstyle関連の情報が取得できます。
 

2. cssText

 

書かれているとおりに取得したいのであれば、”getAttribute”で、解釈されたcssを取得したければ、”cssText”がいいでしょう。

3. getPropertyValue

cssの値というのは、書かれている一括テキストを取得するのではなく、propertyに対して何の値が入っているかを知りたいので、cssTextのような形で取得しても、自分で分解する関数を書いてさらに値を取得しなければいけないのですが、”getPropertyValue”を使えば、直に値を取得できます。
 

そんな時は以下のようにすると、値のみ取得することができます。
 

4. getComputedStyle

しかし、これまでの情報は、タグに直書きされていなければ、値を取得できないため、styleとして登録されている情報の取得にはならないので、そんな場合は、”getComputedStyle”を使って取得しなければいけません。
 

 

上記の全部入り状態のソースですが、これの返り値は以下のようになります。
 

 

cssに書かれた情報と、直書きされた情報がそれぞれ別に取得されていることが確認できるので、わかっていただけたかと思います。
 

cssでは”red”を指定したのに、返り値が”rgb(255, 255, 0)”となってしまっているのは、仕様として受け止めましょう。
 

ブラウザの対応状況

便利に使えそうな”getComputedStyle”命令ですが、ブラウザの対応状況はどんな感じでしょう。
 

いつものように、can i useサイトで調べてみました。
 


 

予想通りIE6-8が真っ赤になっていますが、現状サポート対象ブラウザの範囲では全く問題なさそうですね。
 

それにしても、IE8以下って、ブラウザとして、機能できてないので、使っている人認識した方がいいですよ・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です