【ネイティブ化】JavaScriptでbackground: coverみたいなことをする方法

Pocket

普段はjQueryに頼りきりでネイティブで書かなきゃいけないような仕事はないんですが、とはいえなんとなくネイティブでも書けないとなぁ。という淡い危機感があったので「jQueryでbackground: coverみたいなことをする方法」をネイティブ化してみました。

結果的にwindowサイズの取得とresizeイベントでIE8対応が必要だったくらいで、あとはすんなりですね。

※IE8〜11、Safari(Mac)、Firefox、Chromeで動作確認しています。

プレビュー

IE8がwindowサイズをinnerWidthで取得できないため win_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; という形でpolyfillしてやります。

addEventListenerもIE8では対応していないので、attachEventを使います。ちなみに、window.onresizeでは競合する可能性があるのでイベントリスナーを使っています。

おわり。

Pocket

コメントを残す