任意のエレメントに、サイズに応じてclassの追加/削除をするスクリプト・Responsive elements

Ads

任意のエレメントに、画面サイズに合わせて特定のclassの追加/削除を行うスクリプト・Responsive elementsのご紹介です。特定の画面サイズになるとclassが付与されるので、そのclassを使ってCSSを書きます。

前も似たようなものがあった気がしますけど・・こちらも軽量で良さそうです。classを与える事で、RWDの対応もしやすくなりそうです。尚、スクリプトはjQuery依存です。

Responsive elements


特定のサイズで指定した要素にclassを追加してくれます。シンプルで良さそうですね。

セッティングは要素ごとにカスタムデータ属性を利用します。

<div class="foo" data-respond="start: 100px; end: 900px; interval: 50px;">

これで、画面サイズにあわせてclassが付与されます。

詳細は以下よりどうぞ。

Responsive elements