jQueryのoffset()メソッドの使い方を現役エンジニアが解説【初心者向け】

初心者向けにjQueryのoffset()メソッドの使い方について現役エンジニアが解説しています。offsetメソッドは、document上に配置したHTML要素がある表示位置をドキュメントの左上を起点とした相対位置として取得するメソッドです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

jQueryのoffset()メソッドの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

jQueryのoffset()メソッドの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

jQueryのoffset()メソッドとは

offsetメソッドとは、document上に配置したHTML要素がある表示位置をドキュメントの左上を起点とした相対位置として取得するメソッドです。

jQueryのoffset()メソッドの使い方

対象要素の位置を取得するには

 

対象要素.offset()

 

として実行します。

例えば、画面上にh1要素がある場合には

 

$('h1').offset();

 

として表示位置を取得することができます。

実行結果として

 

{top: 512, left: 78.5}

 

documentの左上からの相対位置のX(top)座標とY(left)座標が戻り値となります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

offset()メソッドで要素の取得、位置設定をしてみよう

いろいろな要素の位置情報を取得

$('div').offset();

// {top: 4400, left: 0}

$('input').offset();

// {top: 964.828125, left: 918.5}

$('select').offset();

//undefined

$('body').offset();

// {top: 0, left: 0}

 

topとleftはオブジェクト形式で格納されているので、topのみ、leftのみを簡単に取得することができます。

var h1Offset = $('h1').offset();

var h1Top = h1Offset.top;

var h1Left = h1Offset.left;

 

offset()の引数を設定することで、表示位置を設定することができます。

設定方法としては

 

offset( { top: Y座標, left: X座標 } )

 

になります。例えば、h1要素の表示位置を設定したい場合は

$('h1').offset({top: 3000, left: 30});

となります。

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。

現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。