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

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

توسط

۱۴۰۰-۰۲-۱۶

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

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

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

Free-Learn

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

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

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

با استفاده از ویژگی offsetLeft میتونیم میزان فاصله یک عنصر رو از سمت چپ به نسبت عنصر والد یا پدرش بدست آوریم، و با استفاده از ویژگی offsetTop نیز میتونیم میزان فاصله یک عنصر رو از سمت بالا به نسبت عنصر والد یا پدرش بدست آوریم.

مقداری که این ویژگی بازگشت میده شامل :

میزان فاصله از سمت چپ + میزان مقدار ویژگی Margin
مقدار Padding سمت چپ + مقدار Border و اسکرول بار عنصر والد

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

مقدار برگشتی	یک مقدار به پیکسل که نشان دهنده میزان فاصله یک عنصر از سمت چپ به نسبت عنصر والد یا پدرش می باشد

Free-Learn

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

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

مثال شماره ۱ : با کلیک بروی یک دکمه، میزان فاصله ی عنصر از سمت چپ و سمت بالا محاسبه میشه ( حواستون باشه فاصله به نسبت پدر یا والد محاسبه میشه ) که در مثال زیر عنصر والد میشه تگ Body

<script>

function get_size() {
 var mybox , result , mysize;
 mybox = document.getElementById("mybox");
 result = document.getElementById("Result");
 mysize = "Left = " + mybox.offsetLeft + "px" + "<br>" + "Top = " + mybox.offsetTop + "px";
 result.innerHTML = mysize;
}

</script>

function get_size() {

var mybox , result , mysize;

mybox = document.getElementById("mybox");

result = document.getElementById("Result");

mysize = "Left = " + mybox.offsetLeft + "px" + "<br>" + "Top = " + mybox.offsetTop + "px";

result.innerHTML = mysize;

}

</script>

امتحان کنید

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

در مثال بالا ما میخوایم فاصله ی یک عنصر رو از سمت چپ و بالا به نسبت عنصر پدر ( یا والد ) محاسبه کنیم، خیلی راحت با استفاده از ویژگی های offsetLeft ( از سمت چپ ) و offsetTop ( از سمت بالا ) اینکارو انجام دادیم.

عنصر والد یا پدر ، یعنی مثلا اگه باکس A درون باکس B بود، باکس B میشه والد یا پدر باکس A ، پس فاصله ای که محاسبه میشه به نسبت عنصر والد می باشد.

در مثال بالا، عنصر والد میشه کی بنظره شما؟! درسته ، عنصر والد میشه تگ Body ، پس فاصله به نسبت تگ body محاسبه میشه، یعنی میشه فاصله ی باکس سبز از سمت چپ به نسبت تگ Body

ولی در مثال شماره ۲ که پایینه، خودمون اومدیم و عنصر والد رو درست کردیم.

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

<div id="pedar">
 <div id="farzand">
  <p id="Result"></p>
 </div>
</div>

</div>

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

Element.offsetLeft;

1	Element.offsetLeft;

Free-Learn

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

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

Free-Learn

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