offsetについてのjqueryで質問です。

ただいま、jqueryを勉強中です。
現在、ツールチップを作成しているのですが、コードは問題なく、ツールチップが表示されるのですが、その仕組みがよく理解できなく困っております。

HTMLのサンプルコードのp要素のabbrにtooltipと言うクラスを作成し、
tooltipのabbr要素やa要素にマウスがのったときにはツールチップがアニメーションで表示され、マウスをはずしてしばらくするとアニメーションしながら消えていくような仕様です。

jqueryのサンプルコード内の①と②の箇所なのですが、
当初は先に②を記述していました。
ですが、それだとブラウザを小さくするとツールチップの中が改行されて、高さが高くなり、
オフセットする高さが足らずにabbr要素にツールチップが重なってしまったため、
先に①のX軸の配置をきめてから、高さを取得するように書き直しました。

そうすると、もしツールチップが画面右に配置されて改行されても
その分の高さを取得することができるそうなのですが、

なぜ、先に高さを設定すると改行された分の高さを取得できないのでしょうか。
x軸を決めてからなら、改行された分の高さが取得できるという仕組みがいまいちよくわからず、offsetについてやheightについて2日間ずっと、インターネットで調べたのですが、
そのような仕組みが書かれているものが見つけることができませんでした。

初心者で、大変お恥ずかしいご質問なのですが、
どうかご教授いただけませんでしょうか。
どうぞよろしくお願いいたします。

/****************************************

 jQueryのサンプルコード

*****************************************/

$(function() {
$(".tooltip").each(function(){
var toolTip = $('<div class="tooltip-body">');
var toolTipText = $(this).attr("data-tooltip");
toolTip.html( '<p>' + toolTipText + '</p><span class="tail"></span>' ).hide();
$("body").append(toolTip);
$(this).hover(function(){
if(toolTip.css("display") == "none"){
var targetPostion = $(this).offset();
toolTip.css({
"display":"block",
"position": "absolute",
"left": targetPostion.left + "px",//=======①
"z-index": "9999"
});
var toolTipHeight = toolTip.height();//======②
toolTip.css({
"top": targetPostion.top - toolTipHeight -3 + "px",
"opacity": "0"
})
.stop().animate({
"top" : "-=10px",
"opacity": "1"
}, 250);
}
},
function(){
if(toolTip.css("display") != "none"){
setTimeout(function(){
toolTip.stop().animate({
"top": "-=10px",
"opacity": "0"
}, 250, function(){
toolTip.hide();
}
);
}, 1000);
}
});

});

});
</script>

<p> Webサイトを作成するには、まずは <abbr class="tooltip" data-tooltip="Hypertext Markup Language">HTML</abbr> をマークアップします。そして <abbr class="tooltip" data-tooltip="Cascading Style Sheets">CSS</abbr> を使ってデザインを施していきます。 </p> <p> そして最近では、Webデザインをもっと素敵にするために、<a class="tooltip" href="http://jquery.com/" target="_blank" data-tooltip="jQuery 公式サイトへ">jQuery</a> を利用する機会も増えてきました。 </p>

行動規範の内容に同意します

回答1件

ベストアンサー

jQuery の.height()は、その時点での実測の高さを測定しています。
なので、x座標の位置によって改行の有無が変化すれば、当然.height()の値も変化します。

その時点での実測の高さであるという証拠をいくつかお見せします。
x座標に限ったことではないので、分かりやすい例を示したいと思います。

例1 フォントサイズの変化による.height()の値の変化
フォントサイズは要素の高さに影響を与えます。つまり、フォントサイズの変更は.height()の値の変化につながります。

lang
1var $elm = $('<p>文字</p>').appendTo("body");
2alert( $elm.height() ); // 16
3$elm.css("font-size", "50%"); // フォントサイズを半分にすると…
4alert( $elm.height() ); // 10 になった！

例2 親要素の変化による.height()の値の変化
スタイルは親要素から継承されます。つまり、親要素のスタイルが変化すると、.height()の値も変化することがあります。

lang
1var $child = $('<p>文字</p>');
2var $parent = $('<div></div>').append($child).appendTo("body");
3alert( $child.height() ); // 16
4$parent.css("font-size", "50%"); // 親要素のフォントサイズを半分にすると…
5alert( $child.height() ); // 10 になった！子要素のフォントサイズも変化したためである

例3 ページに追加されていない要素は.height()の値を取得できない
何度も申し上げたとおり、.height()はその時点での実測の高さを取得します。つまり、ページ上に追加されていない要素は実測の高さを持たないので、常に0が返ります。

lang
1var $elm = $('<p>文字</p>');
2alert( $elm.height() ); // 0。ページ上に表示されていないため
3$elm.appendTo("body"); // ここでページに表示する
4alert( $elm.height() ); // 16 になった！ページ上に表示されたので、実測の高さを持つことになった

（尚、実測の高さはブラウザやOSの違いでも変化します。なのでそちらのパソコンでは若干違った値になることもあります）

例に見てきたように、.height()はその時点での実測の高さを取得するため、フォントサイズや親要素のスタイルや、もちろんx座標による改行位置の変化にも影響されます。
なので、スタイルを設定する前と後では、値が変わってしまうものなのです。

投稿2015/05/03 13:18

kura

総合スコア368

batakosan

2015/05/03 14:31

kura様お忙しい中、ご回答いただきまして、誠にありがとうございます。ご丁寧なご回答をいただき、大変分かりやすいご説明で悩みが解決いたしました。例までお教えくださって、本当にありがとうございました。 .height()はその時点での実測の高さを取得するので、toolTipへスタイルの変更を先に行ってから改めて、X軸の変化したtoolTipのその時点での実測の高さを得るということですね。初心者で分からないことが多いのですが、この度は大変助かりました。ありがとうございました。

行動規範の内容に同意します