JavaScript/jQueryでdocumentのピクセル数を取得する方法まとめ

前回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だけ若干異なる動きをすることがあります。

それについてより詳細に調べたいなと思っています。

それはまたいずれ。

スポンサードリンク

twitterまたはFacebookでもコメントして頂けます