این آموزش در تاریخ ۱۴۰۱/۰۵/۰۴ آپدیت شده است.

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

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

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

Free-Learn

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

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

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

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

Free-Learn

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

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

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

امتحان کنید

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

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

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

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari Edge
offsetParent بله بله بله بله بله

Free-Learn

شکل نوشتاری

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


Free-Learn

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

  • اگه تگ فرزند یا تگ پدر با استفاده از ویژگی display مخفی شده باشه، هیچی برگشت نمیده.

Free-Learn

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