イナヅマTVログ

復習, Element の CSS値を調べる getComputedStyle / currentStyle

| 0件のコメント

知らないくせに知ってるふりをしてました。

ちょっとはまったので、
次使うとき困らないようにおさらいしました。
Element の CSS値を調べる getComputedStyle / currentStyle。

getComputedStyle

MDN: Window.getComputedStyle()

var style = window.getComputedStyle(element[, pseudoElt]);

getComputedStyle の親オブジェクトがブラウザによって違った過去もあったようですが、現在は window で大丈夫なようです。

currentStyle

MSDN: currentStyle object

getComputedStyle が使えないブラウザ(IE)は代わりに currentStyle を使う。

color

値が rgb、16進 と使う関数で違うの注意しないと。。。

<style type="text/css">
#element {
  color: #ccc;
}
#element2 {
  color: #cccccc;
}
</style>

getComputedStyle

  • element
    rgb(204, 204, 204)

  • element2
    rgb(204, 204, 204)

currentStyle

  • element
    #ccc

  • element2
    #cccccc

padding

<style type="text/css">
#element {
  padding: 2px 4px 6px 8px;
}
</style>

◾️ getComputedStyle

var style = window.getComputedStyle( document.getElementById( 'element' ), null );

◾️ currentStyle

var style = document.getElementById( 'element' ).currentStyle( null );
  • style.padding
    2px 4px 6px 8px

* Firefox は ”(空)

  • style.paddingTop
    2px

  • style.paddingRight
    4px

  • style.paddingBottom
    6px

  • style.paddingLeft
    8px

padding ショートハンドプロパティ

padding に限らずショートハンドプロパティには気をつけないと…
Firefox は常に空文字を返しました。
Android Firefox も同じく空です。

iOS Firefox は Safari とエンジンが同じなので空文字にはなりません。

Android 標準ブラウザも空文字になるようです。

Firefox で padding などのショートハンドプロパティで他ブラウザのように空文字にならないようにするためにはちょいと関数を作らないといけない模様。

background-color

background-color を設定していないエレメントだと…

  • Chrome ,Safari
    rgba(0, 0, 0, 0)

  • Firefox
    transparent

iOS Firefox はrgb形式値を返しました。

う〜〜ん、なかなか闇は深いようです。

コメントを残す