offsetParentとは
- ここで説明する offsetParent とは次の語句からなるjQueryのメソッドです。
- offset
- 読み: オフセット
意味: 相殺、埋め合わせる、補正 - parent
- 読み: ペアレント
意味: 親
offsetParentメソッドの概要
このメソッドは、呼び出し元の要素から先祖方向にある一番近い位置指定要素を取得します。
位置指定要素とは CSS の position プロパティを使って表示位置 (relative / absolute / fixed) を設定した要素のことです。
構文
サンプルを見る前に構文を確認しておきます。
このメソッドは引数を受け付けません。
$(childSelector).offsetParent()サンプルコードと実行結果
ここでは、div, span, b の3要素を題材にします。
子要素を b として、その親に span要素 、更にその親に div とします。
メソッドの呼び出し元要素は b です。 div は CSSで位置指定を行っているので、この要素が、ここでの取得要素となります。
サンプルコード: CSS
<style>
div{
position: relative;
background-color: ##lightblue;
padding: 3em;
}
span{
background-color: ##lightpink;
border: thin solid currentColor;
margin: 1em;
padding: 2em;
}
b{
background-color: ##lightcoral;
border: thin solid currentColor;
padding: 1em;
}
</style>
- 02: div (position: relative; この要素が位置指定要素です。)
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>positioning parent
< span><b>child</b>< /span>
</div>
<button id="idButton">Click</button>
<script>...</script>
</body>
- 06-08: div (この要素は CSS で位置指定を行っています。)
- 07: span (div の子であり、b の親です。)
- 07: b (この要素が offsetParent() の呼び出し元です。)
- 09: button (ボタンです。クリックすると script 02 ~ 07 のコードが実行されます。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("b").offsetParent().css({
"background-color" : "##lightgreen",
"left" : "50px"
});
});
</script>
- 02-07: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
- 03: $("b").offsetParent() (b を呼び出し元とし、位置指定した一番近い先祖要素を取得します。)
- 03-06: css() (位置指定要素のスタイルを設定します。)
positioning parent
child