中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

[javascript]レスポンシブデザインのWEBに使用できる!現在のウィンドウサイズの取得と判定をして処理を変更する方法

投稿日:

レスポンシブ対応のときウィンドウ幅でjavascriptの動きを変更したいと思ったことはないでしょうか。今回jQueryを用いてウィンドウ幅に合わせて処理を変更する方法を見つけましたので紹介いたします。

javascript

<script>
$(window).resize(function(){
    var w = $(window).width();
    var x = 500;
    if (w <= x) {
        $('#sample').css({
            color: 'red'
        });
    } else {
        $('#sample').css({
            color: 'black'
        });
    }
});
</script>

HTML

<p id="sample">サンプル</p>

ウィンドウサイズが500px以下の場合は文字が赤になり、それ以外は黒になります。

参考:
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

jQueryを使ってボックス要素をランダムに表示する方法

一部の要素をランダムに表示させたいという要望があったので、調べてみたところ、よさそうなjavascriptがあったので紹介いたします。結構手軽だったので活用できるシーンは多いのではないでしょうか。

【Javascript】IE6でもpng画像を使えるようにする

IE6でpng画像を使うと、透明部分が灰色になって正常に表示されません。 IE6でも正常に表示させるためには「DD_belatedPNG」というライブラリを利用します。 img要素やCSSでの背景(背 …

【javascript】SWFObjectで配置したFlash下に、ドロップダウンメニューが隠れてしまう

jquery.droppy.jsなどのドロップダウンメニュー(プルダウンメニュー)の下にFlashを配置すると、プルダウンメニューがFlashの裏側に表示されてしまう。CSSでFlashコンテンツにz …

【javascript】年齢認証ページの作り方 一例

エロサイトや酒の紹介ページ(販売ページ)などに使えるjQueryを紹介いたします。

【javascript】西暦を自動的に更新されるようにjavascriptで表示する

今回は西暦を自動的に更新されるようにできるjavascriptをメモしておきます。 ・現在の西暦を自動的に取得する方法。 ・最終更新日の西暦を取得する方法。 2パターンあります。 コピーライトの部分と …