【JS】ブラウザの横幅をjQueryで動的に取得・表示する方法
2018/08/30
レスポンシブなデザインのサイトを作っていた際、あるブロックをブラウザの横幅により表示/非表示（display:none）する必要が出てきました。
その際に使用した、jQueryで動的に横幅を取得する方法です。
ブラウザ幅を動的に取得するスクリプト
デモ
px
↑ ブラウザ幅を変更すると、動的に数値が変わります
使用例
以下は、ブラウザ幅が799px以下の場合は #box というブロックに hideクラスを付与し非表示にし、800px以上の時は、hideクラスを削除するという例です。
各種コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> var checkWidth = function() { var browserWidth = $(window).width(); if(browserWidth <= 799){ $('#box').addClass('hide'); }else{ $('#box').removeClass('hide'); } }; $(function(){ checkWidth(); $(window).resize(checkWidth); }); </script> <style> .hide { display:none; } </style> |
jQueryでは、ブラウザの横幅は $(window).width(); で取得できますが、リロードのあとなど、1回しか動きません。
動的に取りたい場合は resize() を使用する事で取得が可能となります。
ということで、ルーチンを２段構えにする必要があるので、上記のような形となっています。
13行目の checkWidth(); をコールすることにより、読み込んだ時の処理を走らせ、横幅が変更された場合に作動する resize() により変更された瞬間の横幅を取得し、処理しています。
レスポンシブなサイトを作成の際に使えるルーチンではないでしょうか。
外部ファイル化
複数のhtmlヘッダにスクリプトを全てを書くってのが面倒になるので、外部ファイル化してみました。
読み込みのhtmlは必要かつ、内容はほぼほぼ同じですが。。。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function tgBrowserWidth() { var checkWidth = function() { var browserWidth = $(window).width(); $("span#wid").text(browserWidth); }; $(function(){ checkWidth(); $(window).resize(checkWidth); }); } |
↑ 上記内容を jquery.tgBrowserWidth.js として外部ファイル化。文字コードはUTF-8を推奨。
|
1 2 |
<script src="./js/jquery.tgBrowserWidth/jquery.tgBrowserWidth.js"></script> <script>$(document).ready(tgBrowserWidth());</script> |
↑ 任意のパスに設置し、htmlヘッダで読み込みます。
|
1 |
<span id="wid"></span> |
↑ htmlの任意の箇所に spanタグ を記述してください。そこにピクセル数を出力します。
本文コンテンツへ出力したくない場合は、スクリプトの console.log() のコメントアウトを外し、Firebug等で確認すると幸せになれそうです。
デモ
デモはこちらから。
lightning-bolt.xyz/js/jquery.tgBrowserWidth/