時代はJavascriptが必要最低限と言っている。
PCアプリを作るのも、Webアプリを作るのも、スマホアプリを作るのも、ホームページを作るのも、どれもJavascriptでできてしまう。
他のプログラム言語は、適材適所で使われるが、Javascriptは比較的、網羅性を持っているようだ。
なので、Javascriptを学習したがる人が多いのもうなづけるし、企業がJavascriptの上級エンジニアを欲しがるのもよくわかる。
そんな理由は、全く関係なく、毎日Javascriptで勤しんでいる時に、毎回画面サイズで少し悩む事があるので、メモ書き、備忘録残し、コピペ用スニペットをブログに書いておきたいと思います。
Javascroptが画面サイズが必要になるタイミング
何が何でも、画面サイズが必要になるわけじゃないです。
次のような場合に画面サイズが必要になります。
1. ブラウザサイズに応じたコンテンツのサイズ調整などを行う場合
2. スクロールに対するアクションをする場合
画面サイズ取得ソースコード
画面の表示サイズの取得
横 : document.documentElement.offsetWidth
縦 : document.documentElement.offsetHeight
【結果】
横 :
縦 :
【注意】 スクロールバーのサイズは含みません。
スクロールサイズの取得
横 : document.scrollingElement.scrollWidth
縦 : document.scrollingElement.scrollHeight
【結果】
横 :
縦 :
htmlとbodyにheight:100%をセットしている時
cssの設定で、上記のサイズ取得が大きく変わってしまうことがあります。
おまじないのように、html,body{height:100%;}と書いている場合に、画面の表示サイズを取得すると、スクロール値も含めたサイズが返ってきます。
そんな場合は、次のように取得します。
横 : window.innerWidth
縦 : Window.innerHeight
【結果】
横 :
縦 :
スクロールの値を取得
縦 : document.scrollingElement.scrollLeft
横 : document.scrollingElement.scrollTop
【結果】
横 :
縦 :
あとがき
以後の開発でコピペできるようにしておきました。
中では解説しませんでしたが、
document.documentElementやdocument.scrollingElementは、windowと同じと考えても言いんですが、それぞれドキュメント全体とスクロールの専用要素なので、意識して使うと良いかと思います。
