Help us understand the problem. What is going on with this article?

jQueryのとネイティブの寸法系メソッドの違い

More than 1 year has passed since last update.

jQueryの寸法系のメソッドは、DOMに対して大幅な変更が入っている部分もあります。

メソッド名が統一されていない例

IEがDHTMLとして入れたものをそのまま引き継いでいるという歴史的経緯もあってか、寸法系のプロパティは通常の要素とwindowdocumentで別物になっている例も多く、jQueryがそれを吸収していたりもします。

たとえば、scrollTopscrollLeftはスクロールするエレメントにあるプロパティですが、windowdocumentにはないので、これらでは代わりにwindow.pageYOffsetwindow.pageXOffsetを取り出しています。

4段階の取得メソッド

jQueryでは、幅・高さの取得系メソッドは、3つ・4段階に分かれています。

  • width/height…中身とパディングの間が基準
  • innerWidth/innerHeight…パディングとボーダーの間が基準
  • outerWidth/outerHeight…ボーダーとマージンの間
  • outerWidth(true)/outerHeight(true)…マージンの外側

普通のエレメントの場合、jQueryの内部では中身、マージン、パディング、ボーダーなどをCSSとして取得して足し合わせる、というような処理を行っています。

ネイティブDOMで容易に取得できるのは、.clientWidth/.clientHeightでパディングの外側(jQueryのinner系相当)、.getgetBoundingClientRect()経由でボーダーの外側(jQueryのouter系相当)などがあります。

そして、windowdocumentについては、jQueryで特殊な扱いをしています(widthだけ書きますが、heightも同じです)。

  • $(window).outerWidth()window.innerWidth(スクロールバー込みの幅)
  • $(window).innerWidth() & $(window).width()document.documentElement.clientWidth(スクロールバー抜きの幅)
  • $(document).***width()(3つとも同じ)…「document.bodydocument.documentElementscrollWidthoffsetWidth(2×2=4通り)、document.documentElement.clientWidth」の5つの中での最大値

offsetの違い

jQueryで書いてあった.offset().topを機械的に.offsetTopに置き換えたところ、値が合わない、ということが発生しました。調べてみると、

  • jQuery….offsetの基準点はドキュメントの左上
  • ネイティブ….offsetTopの基準はoffsetParent ノード(positionをかけた要素など、ドキュメントの途中にも入りうる)

と、基準が違うとのことでした。ということで、ドキュメントの左上から測りたいときは、以下のjQueryのコードを参考に組み立てるのが良さそうです。

jQuery.fn.offset()より取得部分を引用
if ( !elem.getClientRects().length ) {
    return { top: 0, left: 0 };
}

rect = elem.getBoundingClientRect();

doc = elem.ownerDocument;
docElem = doc.documentElement;
win = doc.defaultView;

return {
    top: rect.top + win.pageYOffset - docElem.clientTop,
    left: rect.left + win.pageXOffset - docElem.clientLeft
};
jkr_2255
qiitadon
Qiitadon(β)から生まれた Qiita ユーザー・コミュニティです。
https://qiitadon.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした