JavaScriptでのスタイル参照

基本的な内容ですが案外たまに軽くハマることもあるのでメモします。

Bad

var elm = document.getElementById($id);
var style = elm.style

上記でHTMLタグにstyle属性で直接書かれているスタイルを参照できますが、外部ファイルで定義されているスタイルを参照すことはできません。あくまで「HTMLソース内に存在するstyleプロパティの値の参照」にすぎません。

Good

var elm = document.getElementById($id);
var style = elm.currentStyle || document.defaultView.getComputedStyle(elm, '');

上記のようにcurrentStyleとgetComputedStyleの合わせ技で、実際に反映されているスタイルを参照できます。

 後者Goodの方法であれば間違いないのでstyleだけで参照するのは禁じ手と考えるくらいで良いかも知れません。
簡便に済ませたい場合は前者Badの形でも使えなくもないですが「スタイルを参照する」という処理の記法は統一・習慣化した方が良いです。