نحوه بدست آوردن موقعیت یک عنصر HTML (X، Y) با جاوا اسکریپت

تاریخ انتشار : سه‌شنبه 23 اسفند 1401

وبلاگ

نحوه بدست آوردن موقعیت یک عنصر HTML (X، Y) با جاوا اسکریپت

به دست آوردن موقعیت X,Y یک عنصر HTML در جاوا اسکریپت می تواند با استفاده از کد زیر انجام شود:

let element = document.getElementById("example-element");
let x = element.offsetLeft;
let y = element.offsetTop;

console.log("Element X: " + x);
console.log("Element Y: " + y);

جایی که element عنصر HTML است که می خواهید موقعیت آن را بازیابی کنید.

را offsetLeft و offsetTop ویژگی ها موقعیت X و Y آن را به ما می دهند.

برای بدست آوردن موقعیت نسبت به نمای دید (تغییرات و تغییر اندازه را اسکرول کنید)، می توانید انجام دهید:

let element = document.getElementById("example-element");
let x = element.getBoundingClientRect().left;
let y = element.getBoundingClientRect().top;

console.log("Element X (relative to viewport): " + x);
console.log("Element Y (relative to viewport): " + y);

امیدوارم این پاسخ سریع کمک کند. اگر به مثال نیاز دارید، لطفاً بخوانید. من همچنین به شما نشان خواهم داد که چگونه موقعیت عنصر HTML را نسبت به گوشه سمت راست و پایین نما بدست آورید.

یک مثال

بیایید به مثالی نگاه کنیم که کد بالا را در عمل در یک صفحه HTML واقعی نشان می دهد. با خیال راحت کد را کپی و جایگذاری کنید و آن را در تنظیمات خود اجرا کنید.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example-element {
        position: absolute;
        left: 100px;
        top: 200px;
        width: 50px;
        height: 50px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="example-element"></div>
    <script>
      let element = document.getElementById("example-element");
      let x = element.offsetLeft;
      let y = element.offsetTop;
      console.log("Element X: " + x);
      console.log("Element Y: " + y);
    </script>
  </body>
</html>

خروجی:

موقعیت عنصر HTML را برای کنسول با جاوا اسکریپت بنویسید

همانطور که می بینید، کد موقعیت عنصر HTML آبی را در کنسول دقیقاً همانطور که در CSS تعریف کرده بودیم ثبت می کند.

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

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

در صورتی که می خواهید موقعیت x و y را نسبت به گوشه پایین و سمت راست نما بدست آورید، موقعیت x،y را از عرض و ارتفاع نما کم کنید.

به عنوان مثال:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example-element {
        position: absolute;
        left: 100px;
        top: 200px;
        width: 50px;
        height: 50px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="example-element"></div>
    <script>
      let element = document.getElementById("example-element");
      let x = element.offsetLeft;
      let y = element.offsetTop;
      let bottom = window.innerHeight - (y + element.offsetHeight);
      let right = window.innerWidth - (x + element.offsetWidth);
      console.log("Element X: " + x);
      console.log("Element Y: " + y);
      console.log("Element Bottom: " + bottom);
      console.log("Element Right: " + right);
    </script>
  </body>
</html>

توجه داشته باشید که متغیرهای پایین و سمت راست بسته به اندازه ویوپورت تغییر می کنند.

در اینجا نمایی با کمی فضای بیشتر در سمت راست وجود دارد. عنصر Right اکنون 390 پیکسل است:

با کوچک شدن اندازه پنجره، موقعیت یک عنصر در سمت راست نیز کوچک می شود.

توجه: موقعیت (X, Y) هنگام اسکرول تغییر نمی کند

توجه داشته باشید که اگر صفحه را اسکرول کنید، موقعیت های x و y ثابت می مانند.

به عنوان مثال، بیایید صفحه را به اندازه کافی بلند کنیم تا بتوان پیمایش کرد:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        height: 5000px;
      }
      #example-element {
        position: absolute;
        left: 100px;
        top: 200px;
        width: 50px;
        height: 50px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="example-element"></div>
    <script>
      window.onscroll = function() {
        let element = document.getElementById("example-element");
        let x = element.offsetLeft;
        let y = element.offsetTop;
        console.log("Element X: " + x);
        console.log("Element Y: " + y);
      };
    </script>
  </body>
</html>

نتیجه:

همانطور که از تصویر می بینید، موقعیت ثابت باقی می ماند.

گاهی اوقات این رفتار آن چیزی نیست که شما مد نظر دارید. شما می خواهید موقعیت را نسبت به نمای قابل مشاهده بدست آورید.

به عنوان مثال، در تصویر بالا، موقعیت y باید نزدیک به 0 باشد زیرا عنصر HTML تقریباً در بالای نمای اسکرول شده قرار دارد.

چگونه موقعیت (X,Y) را نسبت به Viewport بدست آوریم؟

برای به دست آوردن موقعیت عنصر نسبت به نما می توانید استفاده کنید getBoundingClientRect روش به جای offsetLeft و offsetTop. getBoundingClientRect اندازه یک عنصر و موقعیت آن را نسبت به viewport برمی گرداند.

در اینجا یک صفحه HTML به روز شده است که به اندازه کافی بلند است تا امکان پیمایش را فراهم کند. علاوه بر این، یک تابع جاوا اسکریپت برای ثبت موقعیت عنصر نسبت به نمای اسکرول وجود دارد:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        height: 5000px;
      }
      #example-element {
        position: absolute;
        left: 100px;
        top: 200px;
        width: 50px;
        height: 50px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="example-element"></div>
    <script>
      window.onscroll = function() {
        let element = document.getElementById("example-element");
        let rect = element.getBoundingClientRect();
        let x = rect.left;
        let y = rect.top;
        console.log("Element X: " + x);
        console.log("Element Y: " + y);
      };
    </script>
  </body>
</html>

نتیجه:

با تشکر برای خواندن. کد نویسی مبارک!

همچنین بخوانید

جاوا اسکریپت $ و _ توضیح داده شد

درباره نویسنده

آرتوری جلی: من یک کارآفرین و وبلاگ نویس از فنلاند هستم. هدف من این است که با راهنمایی‌ها و بررسی‌های جامع، کدنویسی و فناوری را برای شما آسان‌تر کنم.