【JavaScript】$(window)と$(document) の違いって何？

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

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

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

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

$(document).width

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

先ほどの「$(window)」ではスクロールバーやアドレスバーを含んだ値になりました。

$(document)を使った場合はページ内に表示されるアドレスバーなどの値を除いたものを取得できるようです。

まとめ

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

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

【JavaScript】canvasで描いた線がぼやける時の対処法

2016.7.31

前回、canvasを使って図形や円を描画する方法を紹介しました。 その中で直線を描画した時に線がぼやけて表示されてしまったと思います。 今回はそのような時の対処法について紹介します。...

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

ではまた。