jquery.js ( ver1.4 ) における要素の位置指定等に関わるコード解読
解読対象コードは以下のメソッド等とし、この順に解読を行います。なお対象とする jquery.js はバージョンアップされたばかりの ver 1.4 とします。
- jQuery.offset……このエントリイで解読します
- jQuery().offset……このエントリイで解読します
- jQuery().position
- jQuery().offsetParent
- jQuery().scrollLeft
- jQuery().scrollTop
- jQuery().innerHeight
- jQuery().innerWidth
- jQuery().outerHeight
- jQuery().outerWidth
- jQuery().height
- jQuery().width
jQuery.offset オブジェクト（5785～5854行）の概要
このオブジェクトには 3 つのメソッドが定義されます。
initialize は、ブラウザ特性を把握するために幾つかのプロパティを設定するメソッドです。
この「幾つかのプロパティ」とは次に列挙した 5 つで、これらは、jQuery().offset() メソッド解読において後述するように、要素の正確な位置算出を行うために使われ、それは同時に、各ブラウザの CSS に関する特性を捉えることになります。
- jQuery.offset.doesNotAddBorder ： 或るボックスの offsetTop を算出する際に、直上の親ボックスのボーダー値を加算しないか（true）、加算するか（false）
- jQuery.offset.doesAddBorderForTableAndCells ： table 内の或るセルの offsetTop 値を算出する際に、table ボックスのボーダー値を加算するか（true）、否か（false）
- jQuery.offset.supportsFixedPosition ：或る要素を強制的に top：20px の位置に fixed 配置して、その offsetTop 値が 20px か 15px ならば true、その場の場合には false。
これは safari が offsetTop をマイナス 5 してしまうバグ対応のようだ。（ 5px は offsetParent の top ボーダー幅である。）
- jQuery.offset.subtractsBorderForOverflowNotVisible ： 或るボックス要素 A の offsetParent 要素の overflow 値を hidden にし、その position をrelative に指定した際に、A.offsetTop 値を A.offsetParent のボーダー高さだけマイナスするか（true）、しないか（false）
- jQuery.offset.doesNotIncludeMarginInBodyOffset ： document.body に marginTop 値を設定した時に、body.offsetTop 値にその marginTop 値を加算しないか（true）、加算するか（false）
上の 5 つのプロパティは、ブラウザのそれぞれの仕様を個別具体的に把握するために用意されたもので、jQuery.offset オブジェクトの 1 つの目的は、この 5 プロパティチェックにあると言えるでしょう。これらのプロパティによってブラウザ毎のバグや仕様の差異がチェックされ、位置算出で補正が必要かどうか判断されるのです。
jQuery.offset オブジェクト内で定義される 2 つめのメソッド jQuery.offset.bodyOffset は、document.body の margin 値を top/left 値に追加し、その値をオブジェクトとして返します。返値の top/left 値は document.body のボーダー辺のドキュメント座標値を示すはずです。しかし、Firefox では body 部に border がある場合に、奇妙な offsetTop/Left 値を返すので、正確な座標値にならない場合があります。（このことの詳細は後述します。）
jQuery.offset オブジェクト内で定義される 3 つめのメソッド jQuery.offset.setOffset は、jquery.js ver1.4 で新設されたものです。
これまでの jQuery(elems).offset インスタンスメソッドは読み取り専用でしたが、ver 1.4 では、elems HTML要素（静的配置の場合も含む）を、配置換えする引数を取ることができるようになりました。この引数は配置換え先となる top、left プロパティを持つオブジェクト（仮に obj と呼ぶ）か、elems のインデックス番号 i と、i 毎の obj の 2 つの引数をもつ関数か、そのいずれかとなります。
jQuery.offset オブジェクトの 5 つのプロパティについて
前のエントリイで触れた W3C Working Draft 04 August 2009 - CSSOM View Module における offsetTop/Left プロパティ定義案を標準と考えた場合、jQuery.offset オブジェクトの 5 つのプロパティが、ブラウザ（全て windows 版）毎にどのようになるのかを一覧にしてみました。
ここに、doesNotSubtractBorderInBodyOffset は私が独自に作成したプロパティです。document.body にゼロではない border 幅が設定されている場合に、document.body.offsetTop 値から、このボーダー値が減じられてしまうかどうかを調べるために設けたものです。
上の表の説明
W3C の列は W3C Working Draft 04 August 2009 - CSSOM View Module での提唱案に従った場合の各プロパティ値です。これを標準と考えて各ブラウザを比較してみます。
すると、標準モードで border なしの場合、Opera と IE8 では doesNotAddBorder が false となることにおいて、Chrome では doesAddBorderForTableAndCells が false となることにおいて、最後に Firefox では doesNotSubtractBorderInBodyOffset が false となることにおいて、それぞれ標準とは異なっています。
つまり、W3C 草案に全て一致するブラウザは現在存在しません。
supportsFixedPosition は、position:fixed をサポートしない IE 及び Opera の後方互換モードでは false となります。
Firefox では document.body に ゼロ幅ではない border がある時とない場合とで、offsetTop/Left が異なる値を示します。border があると offsetTop/Left 値は「マイナスボーダー幅」となるのです。標準でも互換でもいずれのモードでも同様です。
そこで、doesNotIncludeMarginInBodyOffset プロパティを作って調査しました。
こうして、Firefox だけが border 有無によって offsetTop に異なった値を返すことが判明しましたが、これは明らかにバグというべきでしょう。
IE8 の場合、doesNotAddBorder は標準モードと互換モードで異なる値になります。これは IE 互換モードの content.width/height が W3C 標準と異なって border 辺までの値として定義されていることに関連していると推測されます。
subtractsBorderForOverflowNotVisible プロパティの目的
W3C CSS2.1 の仕様として、position : absolute と position : relative では配置原点が異なります。前者は offsetParent のパディング辺が基準となり、後者は offsetParent の内容辺が基準になります。そして内包されるボックスの margin 辺がそれぞれの配置原点に配置されます。（下図参照）
subtractsBorderForOverflowNotVisible プロパティは、或る要素 B の absolute 属性を一時的に relative に変更すると共に、B の overflow 属性を hidden にして、包含要素 C の padding 値だけ当該要素を右下に移動させた時に、当該要素内に静的に配置された子要素 A も B と一緒に動くかどうかを調べています。
上述の「 jQuery.offset オブジェクトの 5 つのプロパティ 」 に掲載した表にあるように、Windows 系の主要ブラウザにおいては、標準モードであれ互換モードであれ、subtractsBorderForOverflowNotVisible プロパティは全て false となります。ですから、どんなブラウザで、このプロパティ値が true となるのか分かりません。つまりこのプロパティの必要性が判然としません。
因みに、その他の jQuery.offset オブジェクトのプロパティでは、私が独自に設定した doesNotSubtractBorderInBodyOffset も含めて、いずれかのブラウザの、いずれかのモードにおいて、他と異なる値となるので、これらのプロパティはブラウザ特性を把握するために必要であることが分かるのですが、subtractsBorderForOverflowNotVisible プロパティだけは、必要性が分かりません。
このプロパティは、Mac 系のブラウザや Windows 系の他のブラウザにおいて、必要なのかもしれませんが、チェックし得ないため不明です。
jQuery.offset オブジェクトコード解読
■jQuery.offset オブジェクト
// jQuery.offset オブジェクトの定義を開始する
5785:jQuery.offset = {
// initialize メソッド定義を開始する。引数はない。
5786: initialize: function() {
// ローカル変数定義
/* 変数 html にはブラウザ特性をチェックするための 2 つの要素をセットしている。
* 1 つは 4 辺共黒で塗りつぶした 5 px 幅のボーダーを持ち、コンテンツ幅も
* 高さも 1 px の div タグ内に設けるチェック対象の空の div タグ。
* そして 4 辺共黒で塗りつぶした 5 px 幅のボーダーを持ち、幅と高さを 1 px、
* セル余白もセル間隔もゼロの table タグ内に配置するチェック対象の空 td タグ。
* これらの 2 つの要素を document.body の左上隅にそれぞれ絶対配置して、
* offsetTop プロパティを使ってブラウザ特性を測定する。
*/
5787: var body = document.body, container = document.createElement('div'), innerDiv,
checkDiv, table, td, bodyMarginTop = parseFloat( jQuery.curCSS(body, "marginTop", true) ) || 0,
5788: html = '';
5789:
// ローカル変数 container のインラインスタイルを設定する。
5790: jQuery.extend( container.style, { position: "absolute", top: 0, left: 0,
margin: 0, border: 0, width: "1px", height: "1px", visibility: "hidden" } );
5791:
5792: container.innerHTML = html; // container 要素内に html 要素を挿入する
// その container を body 要素最前部に配置する
5793: body.insertBefore(container, body.firstChild);
// ローカル変数への代入。innerDiv は checkDiv 要素の parentNode となる。
5794: innerDiv = container.firstChild;
5795: checkDiv = innerDiv.firstChild;
5796: td = innerDiv.nextSibling.firstChild.firstChild;
5797: // ブラウザ特性判定プロパティその 1── doesNotAddBorder を定義
5798: this.doesNotAddBorder = (checkDiv.offsetTop !== 5);
// ブラウザ特性判定プロパティその 2── doesAddBorderForTableAndCells を定義
5799: this.doesAddBorderForTableAndCells = (td.offsetTop === 5);
// #5800 ～ 5804 は ver 1.4 で追加された。
5800: // checkDiv の位置指定を fixed とし、top 値を 20px とする。
5801: checkDiv.style.position = "fixed", checkDiv.style.top = "20px";
5802: // safari subtracts parent border width here which is 5px
// safari では親要素のボーダー幅 5px を減算する。
// ブラウザ特性判定プロパティその 3── checkDiv.offsetTop が 20 あるいは
// 15 の時には true を supportsFixedPosition プロパティに代入し、
// そうでない場合には false を代入する。
5803: this.supportsFixedPosition = (checkDiv.offsetTop === 20 || checkDiv.offsetTop === 15);
// チェックを終えたので、chechDiv 要素の position と top プロパティの
// インラインスタイル指定を取り消す。
5804: checkDiv.style.position = checkDiv.style.top = "";
5805: // checkDiv 要素の parentNode （これは offsetParent でもある）の
// overflow 属性を hidden とし、position 属性を相対配置とした上で
5806: innerDiv.style.overflow = 'hidden', innerDiv.style.position = 'relative';
// ブラウザ特性判定プロパティその 4── subtractsBorderForOverflowNotVisible を定義
5807: this.subtractsBorderForOverflowNotVisible = (checkDiv.offsetTop === -5);
5808:
// ブラウザ特性判定プロパティその 5── doesNotIncludeMarginInBodyOffset を定義
5809: this.doesNotIncludeMarginInBodyOffset = (body.offsetTop !== bodyMarginToo);
5810: // ブラウザ特性判定プロパティの設定を終えたので、container 毎 DOM Tree から削除する
5811: body.removeChild(container);
5812: this.initialized = true; // jQuery.offset.initialized プロパティを true に設定
5814: },
5815:
5816: bodyOffset: function(body) { // bodyOffset メソッドの定義開始
// document.body 要素の offsetTop/Left 値をローカル変数に代入
5817: var top = body.offsetTop, left = body.offsetLeft;
5818: // jQuery.offset.initialize メソッドを起動する。
5819: jQuery.offset.initialize();
5820: // doesNotIncludeMarginInBodyOffset が true ならば
5821: if ( jQuery.offset.doesNotIncludeMarginInBodyOffset ) {
// body の marginTop/Left の算出スタイル値を加算する。
なお、加算しないことは正しい offsetTop/Left の仕様です。
従ってここで margin 値を加算するのは、jQuery.offset.top/left プロパティ
によって、body 要素のボーダー辺の位置を得るために他なりません。
5822: top += parseInt( jQuery.curCSS(body, 'marginTop', true), 10 ) || 0,
5823: left += parseInt( jQuery.curCSS(body, 'marginLeft', true), 10 ) || 0;
5824: }
5825:
5826: return { top: top, left: left };
5827: },
5828: // ver 1.4 で新設されたメソッドで、offset 値を設定するメソッドである。
5829: setOffset: function( elem, options, i ) {
5830: // set position first, in-case top/left are set even on static elem
// 設定対象とする elem 要素の position 算出スタイル値が static ならば
5831: if ( /static/.test( jQuery.curCSS( elem, "position" ) ) ) {
5832: elem.style.position = "relative"; // relative に変更する。
5833: }
// elem の jQuery インスタンス jQuery(elem) への参照を変数 curElem に代入
5834: var curElem = jQuery( elem ),
// curOffset に curElem の offset メソッド適用結果を代入
5835: curOffset = curElem.offset(),
// elem 要素の top 算出スタイル値を curTop 変数に代入する。
5836: curTop = parseInt( jQuery.curCSS( elem, "top", true ), 10 ) || 0,
// elem 要素の left 算出スタイル値を curLeft 変数に代入する。
5837: curLeft = parseInt( jQuery.curCSS( elem, "left", true ), 10 ) || 0;
5838: // 引数 options が関数ならば
5839: if ( jQuery.isFunction( options ) ) {
// i と curOffset を引数として options 関数を起動し、その返値を options に代入する。
5840: options = options.call( elem, i, curOffset );
5841: }
5842:
// offset.top/left の設定値から offset.top/left の現在値を減算し、
// それに top/left の現在値を加算する。要するに、差分を現在値に加算する。
5843: var props = {
5844: top: (options.top - curOffset.top) + curTop,
5845: left: (options.left - curOffset.left) + curLeft
5846: };
5847:
5848: if ( "using" in options ) { // options に using プロパティ（値は関数）があれば
5849: options.using.call( elem, props ); // props を引数として using 関数を起動
5850: } else { // using がなければ
5851: curElem.css( props ); // 対象要素を props に従って配置する。
5852: }
5853: }
5854:};
続いて、2 つめのコード解読を行います。
jQuery().offset() メソッドの概要
このメソッドの目的は、知りたい HTML 要素の border 辺のドキュメント座標値 top 及びleft を知ることです。そのために上述のように、jQuery.offset.bodyOffset オブジェクトの top/left プロパティに、body 部の margin 値を加算して border 辺迄の座標を得ています。（#4248～4255）
この結果、body 要素自体に border（幅 W ）がある場合には、body.offsetTop = 0 （但し、firefox のみ、body.offsetTop = - W となってしまう）ですが、$("document.body").offset().top = marginTop 値 となります（ここでも firefox の場合のみ、marginTop - W となってしまいます）。
このメソッドでは CSSOM で定義されようとしており、現時点では何ら標準化されていない 1 つのメソッド（ getBoundingClientRect ）を使って、あるいは同様に標準化されていない 3 つのプロパティ（ offsetParent、offsetTop 及び offsetLeft ）を使って、要素のドキュメント座標を算出します。
A.getBoundingClientRect メソッドをサポートしているブラウザにおいては、要素 A のクライアント座標値が取得でき、その値はブラウザ間で差異がないので、容易にドキュメント座標値が取得できます。A.getBoundingClientRect メソッドで取得したクライアント座標値に window スクロール値を加算し、clientTop/Left値を減算すれば、要素 A の正確なドキュメント座標値が取得できます。
一方、ブラウザが getBoundingClientRect メソッドをサポートしていない場合には、offsetParent、offsetTop 及び offsetLeft を利用してドキュメント座標を取得するのですが、これらのプロパティはブラウザ毎に解釈が異なっていたり、バグがあったりするので、そのままでは正しい位置が取得出来ません。そこで、上で解読した jQuery.offset オブジェクトの 5 つのプロパティを駆使して、ブラウザ毎・標準互換別の offsetTop プロパティ算出値の差異を補正し、jQuery.offsetParent メソッドによって、ブラウザ間で定義が異なる offsetParent の一意的な確定を行います。
こうして要素のドキュメント座標値（ border 辺迄の値 ）をブラウザに依存せずに正確に算出する訳です。
jQuery().offset() メソッドの欠点
jQuery().offset() メソッドには欠点があります。body 部に border がある場合、Firefox だけ正しい要素位置が算出できないのです。この場合に jquery.js コードの jQuery().offset() で取得される top と left 値は、共に border 幅の値だけ過小になってしまいます。
そこで、エントリイを改めてその補正を行うコードを jquery プラグインとして作成して掲載する予定です。
jQuery().offset() メソッドの詳細解読
■jQuery().offset() メソッドコード
// html要素オブジェクトに getBoundingClientRect が定義されていれば、
// つまりブラウザが getBoundingClientRect メソッドに対応していれば、
5690:if ( document.documentElement["getBoundingClientRect"] )
// jQuery().offset() メソッドを prototype オブジェクトに組み込む
5691: jQuery.fn.offset = function( options ) {
// インスタンスに登録されている最初の要素への参照を elem に登録する。
5692: var elem = this[0];
5693: // elem がないか、document がないならば
5694: if ( !elem || !elem.ownerDocument ){
5695: return null; // null を返す。
5696: }
5697:
5698: if ( options ) { // 引数 options があれば
5699: return this.each(function( i ) { // 対象要素を巡回処理
// setOffset クラスメソッドを呼び出す。
5700: jQuery.offset.setOffset( this, options, i );
5701: });
5702: }
5703: // 対象要素が body の場合
5704: if ( elem === elem.ownerDocument.body ) {
// body を引数に bodyOffset クラスメソッドを 起動する
5705: return jQuery.offset.bodyOffset( elem );
5706: }
5707: // インスタンスに格納されている最初の要素が document.body ならば
// jQuery.offset.bodyOffset(document.body) の返値を返す。
// ローカル変数定義。
/* インスタンスに格納されている最初の要素の getBoundingClientRect()
* オブジェクトへの参照を box に 、 document への参照を doc に、
* document.body への参照を body に 、html 要素への参照を docElem に、
* html.clientTop 又は document.body.clientTop 又はゼロを clientTop に
* html.clientLeft 又は document.body.clientLeft 又はゼロを clientLeft に、
* それぞれ代入する。
*/
5708: var box = elem.getBoundingClientRect(), doc = elem.ownerDocument,
body = doc.body, docElem = doc.documentElement,
5709: clientTop = docElem.clientTop || body.clientTop || 0,
clientLeft = docElem.clientLeft || body.clientLeft || 0,
// ローカル変数定義の続き
/* top として、計測対象要素の top 値 ＋ スクロール値 － clientTop を
* left として、計測対象要素の left 値 ＋ スクロール値 － clientLeft を
* 代入する。
*/
5710: top = box.top + (self.pageYOffset || jQuery.boxModel && docElem.scrollTop || body.scrollTop ) - clientTop,
5711: left = box.left + (self.pageXOffset || jQuery.boxModel && docElem.scrollLeft || body.scrollLeft) - clientLeft;
// 返値定義
5712:
5713: return { top: top, left: left };
5714: };
5715:// ブラウザが getBoundingClientRect に対応していない場合
5716:} else {
// #5717～5783 は #5691～5714 に同じである。
5717: jQuery.fn.offset = function() {
5718: var elem = this[0];
5719:
5720: if ( !elem || !elem.ownerDocument ){
5721: return null;
5722: }
5723:
5724: if ( options ) {
5725: return this.each(function( i ) {
5726: jQuery.offset.setOffset( this, options, i );
5727: });
5728: }
5729:
5730: if ( elem === elem.ownerDocument.body ) {
5731: return jQuery.offset.bodyOffset( elem );
5732: }
5733: jQuery.offset.initialize();
5734: // ローカル変数定義
/* elem に インスタンスに登録されている最初の要素（対象要素）への参照を、
* offsetParent に elem の offsetParent への参照を、
* prevOffsetParent に elem への参照を、doc に document への参照を、
* docElem に html 要素への参照を、body に document.body への参照を、
* defaultView に document.defaultView への参照を、prevComputedStyle に
* document.defaultView.getComputedStyle(elem, null) オブジェクトへの参照を、
* top に対象要素の offsetTop 値を、left に対象要素の offsetLeft 値を
* それぞれ代入する。
*/
5735:
5736: var offsetParent = elem.offsetParent, prevOffsetParent = elem,
5737: doc = elem.ownerDocument, computedStyle, docElem = doc.documentElement,
5738: body = doc.body, defaultView = doc.defaultView,
5739: prevComputedStyle = defaultView ? defaultView.getComputedStyle(elem, null)
: elem.currentStyle
5740: top = elem.offsetTop, left = elem.offsetLeft;
5741:
// 対象要素の親要素を elem に代入し、elem が body で html でもない限り
// 巡回走査する。
5742: while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) {
5743: if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ) {
5744: break;
5745: }
5746:
// computedStyle 変数に対象要素の算出スタイルオブジェクトへの参照を代入する。
5747: computedStyle = defaultView ? defaultView.getComputedStyle(elem, null) : elem.currentStyle;
// スクロール値が重複加算されるのでその都度減算する。
5748: top -= elem.scrollTop;
5749: left -= elem.scrollLeft;
5750:
// 親要素が offsetParent ならば
5751: if ( elem === offsetParent ) {
// 対象要素の親要素の offsetTop 値と offsetLeft 値を加算する。
5752: top += elem.offsetTop;
5753: left += elem.offsetLeft;
5754:
/* 対象要素が 対象要素が table でも td でも th でもなく、かつ
* doesNotAddBorder が true の場合、または、対象要素が table か
* td か th で、かつ doesAddBorderForTableAndCells が true ではない場合
*/
5755: if ( jQuery.offset.doesNotAddBorder &&
!(jQuery.offset.doesAddBorderForTableAndCells && /^t(able|d|h)$/i.test(elem.tagName)) ){
// 対象要素の親要素の border 幅値を top と left にそれぞれ加算する。
5756: top += parseInt( computedStyle.borderTopWidth, 10) || 0;
5757: left += parseInt( computedStyle.borderLeftWidth, 10) || 0;
5758: }
5759:
// 対象要素の offsetParent の offsetParent を 変数 offsetParent に代入
5760: prevOffsetParent = offsetParent, offsetParent = elem.offsetParent;
5761: }
5762:
// subtractsBorderForOverflowNotVisible が true で、overflow 属性値が
// visible ではない場合には
5763: if ( jQuery.offset.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ){
// 対象要素の親要素の border 幅値を top と left にそれぞれ加算する。
5764: top += parseInt( computedStyle.borderTopWidth, 10) || 0;
5765: left += parseInt( computedStyle.borderLeftWidth, 10) || 0;
5766: }
5767: // 対象要素の親要素の算出スタイルオブジェクトを prevComputedStyle 変数に
// バックアップしておく。
5768: prevComputedStyle = computedStyle;
5769: }
5770: // 対象要素の親要素の position 属性値が relative または static ならば、
5771: if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ){
// 最上位の offsetParent である document.body の offsetTop/Left 値を加算する。
5772: top += body.offsetTop;
5773: left += body.offsetLeft;
5774: }
5775:
// ブラウザが position : fixed に対応しており、
// かつ、対象要素の親要素の position 属性値が fixed ならば
5776: if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ){
// html.scroll 値か body.scroll 値の大きい方を top/left 値に加算する。
5777: top += Math.max(docElem.scrollTop, body.scrollTop);
5778: left += Math.max(docElem.scrollLeft, body.scrollLeft);
5779: }
5780:
5781: return { top: top, left: left };
5782: };
5783:} ]]>
-mesureSize.gif)
-offsetAndposition.gif)
-position()MethodDescription.gif)
