【脱jQuery】JavaScriptだけで要素のtop, leftを取得・設定する方法

スポンサーリンク

jQueryのoffsetメソッドをJavaScriptだけで実装する方法をまとめました。

top, leftの取得

jQuery

const left = $('#hoge').offset().left;
const top = $('#hoge').offset().top;

JavaScript

const rect = document.getElementById('hoge').getBoundingClientRect();
const left = rect.left + window.pageXOffset;
const top = rect.top + window.pageYOffset;

top, leftの設定

jQuery

$("#hoge").offset({top: 100, left: 100});

JavaScript

document.getElementById('hoge').style.top = '100px';
document.getElementById('hoge').style.left = '100px';

※jQueryのoffsetメソッドの場合は数値だけでよいが、JavaScriptの場合はpxなどの単位が必要になるので注意

スポンサーリンク

コメント