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)