The jQuery offsetParent() method can be used to get the first positioned parent element. If you place the selected element inside another element, it returns the first positioned parent element.
Syntax
The syntax of this method is given below:-
The syntax contains no parameter to specify and use the method.
jQuery offsetParent() Method to Get First Positioned Parent Element
If you want to get the first positioned parent element, you have to use the jQuery offsetParent() method. You can apply the CSS to the parent after selecting the element. See the example below to apply the CSS property.
Example
|
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 |
<script> $(document).ready(function(){ $('.mygetbtn').click(function(){ $(".mypara").offsetParent().css("background","yellow"); }); }); </script> <style> .divone{ padding:10px; border:1px solid #ccc; margin:10px; } .divtwo{ background:pink; padding:10px; border:1px solid red; margin:10px; } </style> <button type="button" class="mygetbtn">Click to Return Offset Parent</button><br><br> <div class="divone"> <div class="divtwo"> <p class="mypara">This is my paragraph.</p> </div> </div> |
Output
This is my paragraph.
When you click the button given above, the method applies the CSS background color to the first positioned parent. It adds a background color to the element when you click the button given above.
You may also like to read
I hope you like this tutorial on jQuery offsetParent() method. If you have any queries regarding the tutorial, please comment below.
References