الفرق بين المراجعتين لصفحة: «JavaScript/Document/elementFromPoint»

المراجعة الحالية بتاريخ 01:59، 2 أبريل 2018

تنبيه: هذه تقنيّة تجريبيّة، انظر جدول دعم المتصفّحات قبل استخدام هذا التّابع في شيفرة إنتاجيّة.

يعيد التّابع Document.elementFromPoint‎()‎ العنصر الموجود في أعلى الإحداثيّات المعطاة (حسب إطار العرض [viewport]).

إن كان العنصر في النّقطة المحدّدة خاصًّا بمستند آخر (مثل مستند فرعيّ لعنصر iframe مثلًا)، فالعنصر الأب للمستند الفرعيّ هو الذي يُعاد (أي عنصر iframe نفسه). إن كان العنصر في النّقطة المُعطاة مجهولًا (anonymous) أو محتوًى مولَّدًا عبر XBL، مثل شريط التمرير (scroll bar) في صندوقٍ نصيّ، فأول عنصرٍ أبٍ غير مجهولٍ هو الذي يُعاد (الصّندوق النّصيّ مثلًا).

إن كانت النّقطة المعطاة خارج حدود المستند الظّاهرة، أو كان أحد الإحداثيّات سلبيًّا، فالنّتيجة ستكون القيمة null.

إن أردت أن تجد الموقع المحدّد بالضّبط داخل العنصر، فاستخدم التّابع Document.caretPositionFromPoint()‎.

البنية العامة

var element = document.elementFromPoint(x, y);

`x`

الإحداثيّات الأفقيّة لنقطة ما.

`y`

الإحداثيّات الرأسية لنقطة ما.

القيمة المعادة

كائن من النّوع Element يمثّل أعلى عنصر تحت النّقطتين المعطاتين.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<title>elementFromPoint مثال</title>

<script>
function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
</script>
</head>

<body>
<p id="para1">محتوى نصيّ</p>
<button onclick="changeColor('blue');">أزرق</button>
<button onclick="changeColor('red');">أحمر</button>
</body>
</html>

دعم المتصفّحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	53	نعم	نعم	40	نعم

مصادر ومواصفات

مواصفة Shadow DOM

@@ سطر 2: / سطر 2: @@
 '''تنبيه:''' هذه تقنيّة تجريبيّة، انظر جدول دعم المتصفّحات قبل استخدام هذا التّابع في شيفرة إنتاجيّة.
-يعيد التّابع <code>Document.elementFromPoint‎()‎</code> العنصر الموجود في أعلى الإحداثيّات المعطاة (حسب إطار العرض (viewport)).
+يعيد التّابع <code>Document.elementFromPoint‎()‎</code> العنصر الموجود في أعلى الإحداثيّات المعطاة (حسب إطار العرض [viewport]).
 إن كان العنصر في النّقطة المحدّدة خاصًّا بمستند آخر (مثل مستند فرعيّ لعنصر iframe مثلًا)، فالعنصر الأب للمستند الفرعيّ هو الذي يُعاد (أي عنصر iframe نفسه). إن كان العنصر في النّقطة المُعطاة مجهولًا (anonymous) أو محتوًى مولَّدًا عبر XBL، مثل شريط التمرير (scroll bar) في صندوقٍ نصيّ، فأول عنصرٍ أبٍ غير مجهولٍ هو الذي يُعاد (الصّندوق النّصيّ مثلًا).
-إن كانت النّقطة المعطاة خارج حدود المستند الظّاهرة أو أحد الإحداثيّات سلبيًّا، فالنّتيجة ستكون القيمة <code>null</code>.
+إن كانت النّقطة المعطاة خارج حدود المستند الظّاهرة، أو كان أحد الإحداثيّات سلبيًّا، فالنّتيجة ستكون القيمة <code>null</code>.
-إن أردت أن تجد الموقع المحدّد بالضّبط داخل العنصر، فاستخدم التّابع <code>Document.caretPositionFromPoint()‎</code>.
+إن أردت أن تجد الموقع المحدّد بالضّبط داخل العنصر، فاستخدم التّابع <code>[[JavaScript/Document/caretPositionFromPoint|Document.caretPositionFromPoint()‎]]</code>.
 ==البنية العامة==
@@ سطر 15: / سطر 15: @@
 </syntaxhighlight>
-===المعاملات===
+===<code>x</code>===
-====<code>x</code>====
+الإحداثيّات الأفقيّة لنقطة ما.
-الإحداثيّ الأفقيّ لنقطة ما.
-====<code>y</code>====
+===<code>y</code>===
-الإحداثيّ العمودي لنقطة ما.
+الإحداثيّات الرأسية لنقطة ما.
 ===القيمة المعادة===
-كائن من النّوع <code>Element</code> يمثّل أعلى عنصر تحت النّقطتين المعطيين.
+كائن من النّوع <code>[[JavaScript/Element|Element]]</code> يمثّل أعلى عنصر تحت النّقطتين المعطاتين.
 ==مثال==
-<syntaxhighlight lang="javascript">
+<syntaxhighlight lang="html">
 <!DOCTYPE html>
 <html lang="en">