offsetで要素の位置を取得する。値が取得できないときの解決方法も解説。

jQueryのoffsetメソッドを使って、要素の位置を取得したり、設定する方法を説明していきます。
また、取得できないときの対象方法についても調べてきました。

以上のことについて説明していきます。

offset()とは？

メソッドについての説明をしてきます。

offset()は、document内に配置した要素（HTML）の表示されている位置を取得できるメソッドです。

位置は、左上を起点としてY・X座標を取得して、取得した値を利用して、画面のスクロール量に応じたイベントなどに使用することができます。

基本的な記述から値を取得して、利用するまでを解説していきます。

$(‘jQueryオブジェクト’).offset();

$(‘jQueryオブジェクト’)の部分は、基本的にHTML要素が対象になります。
もちろん、クラス名、ID名を指定することも可能です。

指定の仕方は、jQueryの書き方を参考にしてください。

それでは、$(‘jQueryオブジェクト’).offset();に要素を指定して、値を取得してみましょう。

const position =  $(‘p’).offset();
console.log(position);

値は、以下のように取得されます。

{“top”:Y軸の座標, “left” X軸の座標:}

取得した値は、topからの位置（Y座標）、leftからの位置（X座標）をオブジェクトで取得します。

次は、top,leftのそれぞれの値を取得してみましょう。

オブジェクトで取得された値ですが、プロパティを指定してあげることで、個別に取得が可能です。

//基本的な記述例
offset().top

//定数に利用して出力する
const position = $(‘p’).offset();
console.log(position.top);

以上のようにすることで、top（Y座標）を個別に取得できます。

topの部分をleftとしてあげることで、left（X座標）を取得することができます。

offset()は、要素が表示されていないと、座標が取得できません。
取得する値も「０」となってしまいます。
対象の要素に表示非表示をさせている場合は、注意しましょう。

値が取得できずに困っている人は、取得するタイミングで要素が表示されているか確認してみましょう。

もし、対象の要素を非表示にしている場合は、取得する前に表示させてから取得させましょう。

その際、jQueryの発動タイミング（順番）には、注意しましょう。
前述した通り非表示の場合は値が取得できないため、表示させてから発動させるようにしましょう。

上手くいかない場合は、settimeoutなどでjQueryの発動タイミングなどをずらしてあげると、うまく取得できると思います。

offset()は、座標を取得する以外に、任意の座標を設定することもできます。
方法簡単で、offset()の引数に座標を渡してあげるだけです。

//座標を設定する。
offset({
 top; 100,
 left; 200
});

座標を設定するときは、値を取得したときのように、オブジェクトとして渡してあげます。

offset()と似たメソッドで、position()というメソッドがあります。
対象の要素の位置を取得することは同じですが、取得する座標の基準が違います。

基準となる位置が違うので、気をつけましょう。
position()の実行結果は、offset()と同じでオブジェクトで取得します。

offset()とposition()の違いでいえば、要素に余白と枠線があった場合の値に違いがあります。

position()に関しては、marginによる余白を含んだ位置が値として取得されます。
また、位置を指定するときに関しても、含んだ位置で表示されるます。

逆にoffset()は、すべて含まない位置で要素の位置を決めます。