Comment puis-je vérifier la visibilité des éléments DOM en JavaScript simple ?

Vérification de la visibilité des éléments dans le DOM

Question :

Pouvons-nous déterminer si un élément est visible dans le DOM en utilisant JavaScript sans s'appuyer sur des bibliothèques externes comme jQuery ? Si oui, quels attributs devrions-nous prendre en compte pour garantir des contrôles de visibilité précis ?

Réponse :

Pour vérifier la visibilité des éléments en JavaScript pur, considérez les attributs suivants :

• affichage : Les éléments avec un style "affichage" de "aucun" sont pris en compte caché.
• visibilité :Les éléments masqués ont un style de "visibilité" de "caché".

Pour vérifier si un élément est visible, vous pouvez utiliser le code suivant :

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";
}

Cette approche fonctionne dans la plupart des cas. Cependant, si votre page contient des éléments avec « position : fixe », vous devrez peut-être utiliser une approche plus complète qui vérifie également les éléments en dehors du flux de documents normal. Dans de tels cas, vous pouvez utiliser ce qui suit :

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";
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!