• かちびと.net

    Media Queriesで設定したブレークポイントをJavaScriptと:after擬似要素でチェックする方法。シンプルなコードでチェックします。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

便利そうだったので備忘録。Media
Queriesで設定したブレークポイント
を簡単なJSのコードでチェックする、
という方法です。CSSの:after擬似
要素を併用してチェックします。シ
ンプルで良いのでは。

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

:after擬似要素を使う

@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でスタイル情報を文字列で取得します。

getComputedStyleに関しては気になる記事もあったので合わせてご確認下さい。

参考:getComputedStyle について調べてたら深みにハマったのでメモ

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


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

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

via:Easily checking in JavaScript if a CSS media query has been executed

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services