ぐだぐたブログ: Media Queriesで設定したブレークポイントをJavaScriptと:after擬似要素でチェックする

2012年5月5日土曜日

便利そうだったので備忘録。Media

Queriesで設定したブレークポイント

を簡単なJSのコードでチェックする、

という方法です。CSSの:after擬似

要素を併用してチェックします。シ

ンプルで良いのでは。

GW中なので軽めの話題。Media Queriesで設定したブレークポイントをJavaScriptでチェックします。


@media (max-width: 500px) {
    body:after {
        content: 'foo';
        display: none;
        }
body{background:#eee;}
    }

まずは:after擬似要素でcontentプロパティを使い、display:none;しておく。

で、以下のようにJSを書く。


var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'foo') {
    alert("bar!");
}

getComputedStyleというのは、要素にどんなスタイルが当たっているかを調べる的なメソッドで、getPropertyValueでスタイル情報を文字列で取得します。

参考：

上記のコードでは、500px以下ならcontentプロパティでbody:afterにfooという文字列が生成、それに応じて「bar!」というアラートを出すようになっています。ただし、display:none;してあるのでfooという文字列は表示されません。

動作テストは右上の+ボタンを押してjsfiddleで確認してください。背景がグレーの状態でRunさせればalertが出ます。白い背景の時は出ません。

シンプルでいいんですけど、まだちゃんと検証してないので時間を見つけてテストします。

via かちびと.net http://kachibito.net/web-design/checking-in-javascript-if-a-css-media-query.html

ぐだぐたブログ