Bagaimanakah Saya Boleh Semak Keterlihatan Elemen DOM dalam JavaScript Biasa?

Menyemak Keterlihatan Elemen dalam DOM

Soalan:

Bolehkah kita menentukan sama ada elemen boleh dilihat dalam DOM menggunakan JavaScript tanpa bergantung pada perpustakaan luaran seperti jQuery? Jika ya, atribut manakah yang harus kami pertimbangkan untuk memastikan semakan keterlihatan yang tepat?

Jawapan:

Untuk menyemak keterlihatan elemen dalam JavaScript tulen, pertimbangkan atribut berikut:

• paparan: Elemen dengan gaya "paparan" "tiada" dianggap tersembunyi.
• keterlihatan: Elemen tersembunyi mempunyai gaya "keterlihatan" "tersembunyi."

Untuk menyemak sama ada elemen kelihatan, anda boleh menggunakan kod berikut:

function isElementVisible(element) {
  // Check if the element has any parent with "display: none"
  if (element.offsetParent === null) {
    return false;
  }

  // Check if the element itself has "display: none" or "visibility: hidden"
  const style = window.getComputedStyle(element);
  return style.display !== "none" && style.visibility !== "hidden";
}

Pendekatan ini berfungsi untuk kebanyakan kes. Walau bagaimanapun, jika halaman anda mengandungi elemen dengan "kedudukan: tetap", anda mungkin perlu menggunakan pendekatan yang lebih komprehensif yang turut menyemak elemen di luar aliran dokumen biasa. Dalam kes sedemikian, anda boleh menggunakan yang berikut:

function isElementVisibleFixed(element) {
  // Check if the element has any parent with "display: none"
  if (element.offsetParent === null) {
    return false;
  }

  // Check if the element itself has "display: none" or "visibility: hidden" or "position: fixed"
  const style = window.getComputedStyle(element);
  return style.display !== "none" && style.visibility !== "hidden" && style.position !== "fixed";
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Semak Keterlihatan Elemen DOM dalam JavaScript Biasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!