クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【JavaScript】$(window)と$(document) の違いって説明できる?

f:id:clrmemory:20171121071402j:plain

こんにちはクリアメモリです!

javascriptを使っていると、「$(window)」と「$(document」というコードがよく出てくるのですが、今回はこれらのコードの違いについて紹介します。

 

 

はじめに

 

$(window).width や $(document).width を使うことで、画面内の表示された領域の幅を取得することができるのですが、これらの違いについて調べてみました。 

ではまず「$(window)」から説明していきます。

 

$(window)と$(document)

 

$(window)というのは「ブラウザ上から確認できるもの」で、$(document は htmlなどのコードから確認できるもののことを言うようです。

window.screenというコードを使えばスクリーンを取得できます。スクリーンはブラウザから確認できますので、windowを使うということになりますね。

 

documentは「getElementById」を例に出すとわかりやすいですが、このコードは「css」からidを取得しますよね。cssはブラウザ上からは確認することができないので、documentになるんですね。

 

では「window」と「document」が「$(window).width」「$(document).width」になった時はどのような差が出るのか見ていきましょう。

 

$(window).width

 

$(window).widthは簡単に言うと「画面全体の表示領域」になります。

例えば、ページ内の右側にスクロールバーなどが表示されている場合、画面の幅に加えてスクロールバーやアドレスバーなどの領域をプラスした値を取得できるようです。

 

逆に$(document).widthの時は以下のような結果になります。

 

$(document).width

 

$(document).widthを使った場合は「ページの表示領域」になります。

先ほどの「$(window)」ではスクロールバーやアドレスバーを含んだ値になりました。$(document)を使った場合はページ内に表示されるアドレスバーなどの値を除いたものを取得できるようです。

 

まとめ

 

今回は$(window)と$(document)の違いを紹介しました。

とはいっても、私もよくわかっていなかったので備忘録として記事を書いています。

 

www.clrmemory.com

 

参考にしてみてください。

ではまた。

新着記事