كيفية التحقق مما إذا كان العنصر ظاهر في الصفحة عبر جافاسكريبت JavaScript؟

Emad Saif · 30 أغسطس 2022

لدي صندوق box عبارة عن عنصر div وأريد التحقق مما إذا كان ظاهر على الشاشة في المتصفح، حاولت تحديده بالشكل التالي:

const box = document.getElementById('box');
cconsole.log(box.style.display !== 'none')

ولكن يبدو أن هذه الطريقة لا تعمل.

كيف يمكنني معرفة إذا كان عنصر معين ظاهر على الشاشة أم لا بإستخدام JavaScript؟

Sam Ahw · 30 أغسطس 2022

يكفي الإشارة إلى العنصر:

const box = document.getElementById('box');

حيث سيحمل القيمة null في حال كان غير موجوداً في عقد الشجرة DOM.

يمكنك أيضاً الاستفادة من التابع contains في جافاسكريبت كالتالي:

document.body.contains(box);

أما إذا كان العنصر موجوداً لديك وتقصد التحقق من الصف hidden فقط في CSS يمكنك تحقيق ذلك كالتالي:

var box = document.getElementById("box");

  if (window.getComputedStyle(box).display === "none") {
    ....
  }

وفي حال كنت تستخدم الخاصية visibility بدلاً من display يمكنك استخدام التالي:

window.getComputedStyle(x).visibility === "hidden"

السؤال