jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方ホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptjQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方JavaScript2013.02.27jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。width()を使うウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。id="sample">サンプル</p>ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読み込み後にウィンドウサイズを変更しても変わりません。resize()を使ってリアルタイムで現在のウィンドウサイズを取得していきます。'black'});}});</script>これで、ウィンドウサイズが500px以下の場合は文字が赤になり、それ以外は黒になります。読み込んだ後にウィンドウサイズを変更してもリアルタイムで変化していきます。応用次第で色んなところに活用できますね。Heightは、異なる要素の高さをキレイに揃...JavaScript様々なカスタマイズができる便利な通知バー「jquery.peekABar」jquery.peekABarは様々なカスタマイズが可能な通知バー(通...JavaScriptテキストやボックスをレインボーにグラデーションできるjQueryプラグイン「Rainbow.js」Rainbow.jsというjQueryプラグインを使ってみました。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。先日もこの症状が生じてし...2020.02.15ハンドル付きのノートPC用インナーバッグ「エレコム...エレコムから出し入れしやすいハンドル付きのノートPC用インナーバッグが登場しまし...2020.02.14白銀の千秋公園スタバをあとにして朝の散歩をするために千秋公園へと向かった。今シーズンはいままで...2020.02.13日常の休日。スタバで温かいドリップを久しぶりの秋田のスタバ。いっても元旦以来だから約1カ月ぶりか。