知らないくせに知ってるふりをしてました。
ちょっとはまったので、
次使うとき困らないようにおさらいしました。
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形式値を返しました。
う〜〜ん、なかなか闇は深いようです。