offsetTopはtable要素の中ではtable要素からの位置を取得する #JavaScript

jsで特定の要素の位置を取得する場合、

javascriptで位置を取得する

$('#check1').get(0).offsetTop

jqueryを使って取得

$('#check1').offset().top

このように書けますが、たまに取得する値が異なっていたので、どのような時に異なるのかコード書いて試してみました。

サンプルコード

jquery1.11.1
jsfiddle
chromeで

html

<div class="box">
  <p id="check1">check1</p>
</div>

<div class="box">
  <table>
    <tr>
      <td>
        <p id="check2">check2</p>        
      </td>
    </tr>
  </table>
</div>

css

.box {
  width: 200px;
  height: 200px;
}

console.log($('#check1').offset().top, $('#check1').get(0).offsetTop, $('#check1').position().top, '#1');
console.log($('#check2').offset().top, $('#check2').get(0).offsetTop, $('#check2').position().top, '#2');

出力結果

16 16 0 "#1"
235 17 219 "#2"

まとめ

table内の要素に対して、$('#check1').get(0).offsetTopで位置を取得した場合、table要素からの位置を取得します。
cssのzoomプロパティを使用した状態の場合、jqueryの$('#check1').offset().topはうまく動きません。
positionは親要素からの位置を取得します。

この３点を理解した上で、どのように書くのか考えたほうが良さそうです。

ついでに

上記例ではtable要素内で試したましたが、もしかしたら、他にも同様の動作が確認できる状況があるかもしれません。スタックコンテキスト生成して試しましたが、関係ありませんでした。リスト内でも大丈夫でしたし、今の所table要素以外では上記動作は確認しておりません。このメモを書きながら、そもそもtable内で位置取得する書き方はどうなのかってことを考えたほうが良いような気もしております。