ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

styleプロパティーでCSSの情報が取得できない件

外部ファイルに定義されているCSSの情報はどうやらstyleプロパティーで取得することはできないようだ。

#hoge {
  height: 44px;
}
//""がリターンされる。本来であれば44pxをリターンしてほしい
console.log(document.querySelector('#hoge').style.height)

そこでこの問題に対してどうするかというと、windowオブジェクトのgetComputedStyleメソッドを使って取得する

var _hoge = document.querySelector('#hoge');
var _height = window.getComputedStyle(_hoge).getPropertyValue('height');
console.log(_height)

どうしてこんなややこしい方法になってしまったのだろうか?

なぜgetComputedStyleメソッドがwindowオブジェクトに紐ついているのか、domに紐つけた方が使いやすくないかなぁ〜っと思ってしまうのだが。

// このパターンはエラーなのだが、こっちの方が直感的に理解しやすいと思うんですけど、自分だけかな?
var _height = document.querySelector('#hoge').getPropertyValue('height');
// エラー
console.log(_height)