خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت ویژگی offsetParent در DOM جاوااسکریپت

ویژگی offsetParent در DOM جاوااسکریپت

توسط

۱۴۰۰-۰۲-۲۰

آموزش ویژگی offsetParent در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی offsetParent در DOM جاوااسکریپت با من همراه باشید.

ویژگی offsetParent در DOM جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی offsetParent در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 نکات و توضیحات

ویژگی offsetParent در DOM جاوااسکریپت

با استفاده از ویژگی offsetParent میتونیم نزدیک ترین ، عنصر والد یا پدر یا جد یک عنصر را بدست آوریم.

این ویژگی فقط بروی عناصری که موقعیت یا Position های relative یا absolute یا sticky دارند عمل میکنه.

این ویژگی تحت شرایط زیر مقداری که برمیگردونه null یا هیچی می باشد :

اگه خوده عنصر یا عنصر والدش با استفاده از ویژگی display مخفی شده باشه.
اگه خوده عنصر تگ body یا تگ html باشه.

مقدار برگشتی	یک شئ گره که نشان دهنده عنصر والد یا پدر می باشد

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : یک عنصر فرزند درست کردیم، بعد گذاشتیم داخل ۲ تا عنصر والد، با کلیک بروی یک دکمه میخوایم نزدیک ترین عنصر والد یا پدر به عنصر فرزند رو پیدا کنیم.

<script>

function get_Parent(){
 var mybox , myParent, result;
 mybox = document.getElementById("farzand");
 result = document.getElementById("Result");
 myParent = mybox.offsetParent.id;
 result.innerHTML = myParent;
}

</script>

function get_Parent(){

var mybox , myParent, result;

mybox = document.getElementById("farzand");

result = document.getElementById("Result");

myParent = mybox.offsetParent.id;

result.innerHTML = myParent;

}

</script>

امتحان کنید

توضیح مثال بالا :

در مثال بالا، ما اومدیم یک عنصر درست کردیم به عنوان فرزند، و بعدش این فرزند رو گذاشتیم داخل ۲تا عنصر والد ( یعنی اون تگ های div که id بنام pedar-1 و pedar-2 دارند میشن عنصر والد یا پدر )

میخوایم ببینیم نزدیک ترین عنصر والد به عنصر فرزند کیه!؟ پس خیلی راحت با استفاده از ویژگی offsetParent میتونیم اینکارو انجام بدیم، که در نهایت در خروجی باید pedar-2 نمایش داده بشه، که بله درسته چون pedar-2 به عنصر فرزند نزدیکتره.

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام ویژگی	Chrome	Firefox	Opera	Safari	IE
offsetParent	بله	بله	بله	بله	۵٫۵

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

Element.offsetParent;

1	Element.offsetParent;

Free-Learn

نکات و توضیحات

اگه خوده عنصر یا عنصر والدش با استفاده از ویژگی display مخفی شده باشه، این ویژگی مقدار null برگشت میده.
اگه خوده عنصر تگ body یا تگ html باشه، این ویژگی مقدار null برگشت میده.

Free-Learn

دریافت PDF یا پرینت این مطلب