前回JavaScriptとjQueryでwindowオブジェクトのwidthとheightの取得についてまとめました。
今回はそれのdocumentオブジェクト版です。
確認用のページ
こちらについても確認用スクリプトを作りました。
JaveScript&jQuery Document Width/Height
jQueryでの取得はwindowオブジェクトの時と同様に「width()」「height()」と「inner~()」「outer~()」です。
JavaScriptでの取得については少し多いです。「document.body.client~」と「document.documentElement.client~」も取得するようにしてみました。
「document.body」はbodyタグのことです。これらの「clientWidth」「clientHeight」はどちらも予想通りの値を取得できます。
「document.documentElement」はhtmlタグに当たります。こちらは、「clientWidth」は予想通りですが、「clientHeight」はwindowオブジェクトと同じ値になります。
その他については、取得できる値はどれも同じ値になります。
やっぱりjQueryで良さそう
前回の通り、windowオブジェクトの場合は、どの環境でも同じように対応していました。
documentオブジェクトの場合には、1つだけ違いがあります。
それはSafariの場合です。
Safariのみ「document.width」「document.height」が取得できます。
ただ、それについてはjQueryと同じ値になるので、どの環境においてもjQueryの「width()」「height()」を使っておけば良さそうです。
あと、「document.body.client~」はjQueryで「$(‘body’)」でOKですし、「document.documentElement.client~」は「$(window)」と同じなので、jQueryだけでどうにでもなりますね。
結論
結局のところwindowオブジェクトにしてもdocumentオブジェクトにしても、jQueryで全てどうにかなりそうです。
当然と言えば当然ですが。
自分としてはそれがより明確になっただけでも収穫です。
課題としては、前回iOS9についてほんの少しだけ書きましたが、iOS9だけ若干異なる動きをすることがあります。
それについてより詳細に調べたいなと思っています。
それはまたいずれ。
