親要素からの相対位置を取得するにはjQueryのposition()メソッド を使用します。
jQueryのposition()とは親要素からの相対的な表示位置を取得するメソッドであり、指定した要素の親要素を基準にした現在のX座標やY座標を取得したい時に使用することができます。
要素の位置を取得するメソッドは他にもoffset()がありますが、offset()はdocumentを基準にして要素の位置の設定や取得を行うメソッド になります。
それに比べて、position()は親要素を基準として、位置の取得を行うメソッド になりますので扱い方に気をつけるようにしましょう。
今回は、jQueryのposition()メソッドを使って親要素からの相対位置を取得する方法 について以下の内容で解説していきます。
⚫︎ position()を使用する際の注意点
⚫︎ 要素のオフセット位置を取得する場合 要素のオフセット位置を設定する場合 戻り値に要素のオフセット位置を設定する場合
⚫︎ 親要素からの相対位置を取得する場合
ハルトさん
今回はjQueryのposition()メソッドで要素の親要素からの相対位置を取得する方法について説明していきます。
さとみさん
position()とは
position()とは指定した要素の、親要素からの相対的な位置を取得するメソッド になります。
position()とoffsset()の取得位置
position()の書き方
position()の書き方は下記となります。
position()メソッドを呼び出すことで、$の()で指定したセレクタの親要素からの相対位置を取得することができます。
position()を使用する際の注意点 要素が非表示状態の場合は正しく位置を取得できない
指定した要素のdisplayプロパティが「none」の場合は位置を正しく取得することができません ので注意してください。
しかし、visiblityやopacityプロパティのように表示はされていないけど要素自体は残っている場合 は取得できます。
position()は親要素からの相対位置を取得するためのメソッドである
position()は親要素からの相対位置を取得する ためのメソッドとなります。
親要素からの相対位置を取得するサンプルコード
要素の親要素からの相対位置を取得するサンプルコードを紹介します。
プロパティを設定しないで親要素からの相対位置を取得する場合
プロパティを設定しないで親要素からの相対位置を取得する場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" > </script>
< / head >
< body >
< h2 > プロパティを設定しないで親要素からの相対位置を取得< / h2 >
< div class = "divA" >
< span class = "eleA" > インライン要素A < / span >
< / div >
< div class = "divB" >
< p class = "eleB" > ブロック要素B < / p >
< / div >
< input type = "button" class = "btn1" value = "要素Aの親要素からの相対位置を取得" style = "margin: 20px;" >
< input type = "button" class = "btn2" value = "要素Bの親要素からの相対位置を取得" style = "margin: 20px;" >
<script src = "index.js" > </script>
< / body >
< / html >
index.js
$ ( function ( ) {
$ ( ".btn1" ) . click ( function ( ) {
let position = $ ( ".eleA" ) . position ( ) ;
let x = position . left ;
let y = position . top ;
alert ( "要素Aのx座標: " + x + "\n" + "要素Aのy座標: " + y ) ;
} ) ;
$ ( ".btn2" ) . click ( function ( ) {
let position = $ ( ".eleB" ) . position ( ) ;
let x = position . left ;
let y = position . top ;
alert ( "要素Bのx座標: " + x + "\n" + "要素Bのy座標: " + y ) ;
} ) ;
} ) ;
出力結果
プロパティを設定しない場合は親要素からの相対位置をそのまま取得します。
プロパティを設定して親要素からの相対位置を取得する場合
プロパティを設定して親要素からの相対位置を取得する場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" > </script>
< / head >
< body >
< h2 > プロパティを設定して親要素からの相対位置を取得< / h2 >
< div class = "divA" >
< span class = "eleA" > インライン要素A < / span >
< / div >
< div class = "divB" >
< P class = "eleB" > ブロック要素B < / p >
< / div >
< input type = "button" class = "btn1" value = "要素Aの親要素からの相対位置を取得" style = "margin: 20px;" >
< input type = "button" class = "btn2" value = "要素Bの親要素からの相対位置を取得" style = "margin: 20px;" >
<script src = "index.js" > </script>
< / body >
< / html >
style.css
. divA , . eleA , . divB , . eleB {
border : solid 1px black ;
}
. divA , . divB {
margin - top : 20px ;
padding - top : 10px ;
}
. divB {
padding - left : 10px ;
}
index.js
$ ( function ( ) {
$ ( ".btn1" ) . click ( function ( ) {
let position = $ ( ".eleA" ) . position ( ) ;
let x = position . left ;
let y = position . top ;
alert ( "要素Aのx座標: " + x + "\n" + "要素Aのy座標: " + y ) ;
} ) ;
$ ( ".btn2" ) . click ( function ( ) {
let position = $ ( ".eleB" ) . position ( ) ;
let x = position . left ;
let y = position . top ;
alert ( "要素Bのx座標: " + x + "\n" + "要素Bのy座標: " + y ) ;
} ) ;
} ) ;
出力結果
プロパティを設定している場合は、プロパティの値も含めて親要素からの相対位置を取得するようになります。
さとみさん
position()メソッドで、親要素で設定した余白も含めて位置を取得するんですね！
ハルトさん
そうですね。
非表示の状態で親要素からの相対位置を取得する場合
非表示の状態で親要素からの相対位置を取得する場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" > </script>
< / head >
< body >
< h2 > 非表示の状態で親要素からの相対位置を取得する< / h2 >
< div class = "divA" >
< span class = "eleA" > インライン要素A < / span >
< / div >
< div class = "divB" >
< p class = "eleB" > ブロック要素B < / p >
< / div >
< input type = "button" class = "btn1" value = "要素Aの親要素からの相対位置を取得" style = "margin: 20px;" >
< input type = "button" class = "btn2" value = "要素Bの親要素からの相対位置を取得" style = "margin: 20px;" >
<script src = "index.js" > </script>
< / body >
<style>
.eleB {
margin : 30px ;
}
.eleA, .eleB {
display : none ;
}
</style>
< / html >
index.js
$ ( function ( ) {
$ ( ".btn1" ) . click ( function ( ) {
let offset = $ ( ".eleA" ) . position ( ) ;
let x = offset . left ;
let y = offset . top ;
alert ( "要素Aのx座標: " + x + "\n" + "要素Aのy座標: " + y ) ;
} ) ;
$ ( ".btn2" ) . click ( function ( ) {
let offset = $ ( ".eleB" ) . position ( ) ;
let x = offset . left ;
let y = offset . top ;
alert ( "要素Bのx座標: " + x + "\n" + "要素Bのy座標: " + y ) ;
} ) ;
} ) ;
出力結果
非表示の要素はposition()メソッドで親要素からの相対位置を取得することができません。
今回のポイント position()で親要素からの相対位置を取得
⚫︎ 指定した要素の親要素からの相対位置を取得するにはjQueryのposition()メソッド を使用する
⚫︎ position()メソッドは要素が非表示状態の場合は正しく位置を取得できない
⚫︎ position()メソッドはプロパティを設定している場合は、プロパティの値も含めて親要素からの相対位置を取得する
⚫︎ 非表示の要素はposition()メソッドで親要素からの相対位置を取得することができないがpaddingやmarginなどのプロパティの値の位置は取得できる
関連記事
jQueryのoffset()メソッドで要素のオフセット位置を取得/設定する方法 についてはこちらをご参考ください
2020.12.02
要素のオフセット位置を取得/設定するにはjQueryのoffset()メソッドを使用します。
jQueryのoffset()とは要素のオフセット位置の取得や設定を行うメソッドであり、指定した要素のdocumentを基準にした現在のX座標やY座標を設定したり、取得したい時に...
Writer
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
