1. Web
  2. Les API Web
  3. Element
  4. checkVisibility()

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Element : méthode checkVisibility()

Baseline 2024
Nouvellement disponible

Depuis March 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

La méthode checkVisibility() de l'interface Element vérifie si l'élément est potentiellement visible.

La méthode retourne false dans l'un des cas suivants :

  • L'élément n'a pas de boîte associée, par exemple parce que la propriété CSS display est définie sur none ou contents.
  • L'élément n'est pas rendu parce que l'élément ou un élément ancêtre définit la propriété content-visibility sur hidden.

Le paramètre optionnel permet d'effectuer des vérifications supplémentaires pour tester d'autres interprétations de ce que signifie « visible ». Par exemple, vous pouvez vérifier si un élément a une opacité de 0, si la valeur de la propriété visibility de l'élément le rend invisible, ou si la propriété content-visibility de l'élément a une valeur de auto et que son rendu est actuellement ignoré.

Notez qu'une valeur de retour de true ne garantit pas que l'élément est visible pour l'utilisateur·ice, seulement qu'il peut l'être. Les éléments en dehors de la zone d'affichage ou occultés par d'autres contenus peuvent toujours renvoyer true.

Syntaxe

js
checkVisibility(options)

Paramètres

options Facultatif

Un objet indiquant les vérifications supplémentaires à effectuer. Les options possibles sont :

contentVisibilityAuto

true pour vérifier si la propriété content-visibility de l'élément a (ou hérite) la valeur auto, et que son rendu est actuellement ignoré. false par défaut.

opacityProperty

true pour vérifier si la propriété opacity de l'élément a (ou hérite) une valeur de 0. false par défaut.

visibilityProperty

true pour vérifier si l'élément est invisible en raison de la valeur de sa propriété visibility. false par défaut.

Note : Les éléments invisibles incluent ceux qui ont visibility: hidden, et certains types d'éléments qui ont visibility: collapse.

checkOpacity

Un alias historique pour opacityProperty.

checkVisibilityCSS

Un alias historique pour visibilityProperty.

Valeur de retour

false si l'une des conditions suivantes est remplie, sinon true :

  • L'élément n'est associé à aucune boîte.
  • La propriété content-visibility de l'élément a (ou hérite) une valeur de hidden.
  • opacityProperty (ou checkOpacity) vaut true et la propriété opacity de l'élément a (ou hérite) une valeur de 0.
  • visibilityProperty (ou checkVisibilityCSS) vaut true et l'élément est invisible en raison de la valeur de sa propriété visibility.
  • contentVisibilityAuto vaut true, la propriété content-visibility a (ou hérite) une valeur de auto, et le rendu de l'élément est ignoré.

Exemples

Tester checkVisibility() avec du CSS varié

L'exemple suivant vous permet de tester comment le résultat de checkVisibility() peut varier en fonction de différentes valeurs des propriétés CSS display, content-visibility, visibility et opacity.

HTML

Le code HTML définit des éléments <select> pour les propriétés CSS qui influencent les résultats de checkVisibility(). Les premières valeurs (sélectionnées par défaut) font que checkVisibility() retourne true lorsqu'elles sont appliquées à un élément, tandis que les autres valeurs modifient la visibilité.

html
<select id="css_affichage" name="css_affichage">
  <option value="block" selected>display: block</option>
  <option value="none">display: none</option>
  <option value="contents">display: contents</option>
</select>

<select id="css_visibilite_contenu" name="css_visibilite_contenu">
  <option value="visible" selected>content-visibility: visible</option>
  <option value="hidden">content-visibility: hidden</option>
  <option value="auto">content-visibility: auto</option>
</select>

<select id="css_opacite" name="css_opacite">
  <option value="1" selected>opacity: 1</option>
  <option value="0">opacity: 0</option>
</select>

<select id="css_visibilite" name="css_visibilite">
  <option value="visible" selected>visibility: visible</option>
  <option value="hidden">visibility: hidden</option>
  <option value="collapse">visibility: collapse</option>
</select>

Ensuite, un élément <pre> sert à afficher le résultat de l'appel à checkVisibility() lorsqu'aucune option n'est passée en paramètre, ainsi que pour chaque valeur d'option. Enfin, nous avons l'élément qui est testé (auquel nous appliquons les valeurs CSS sélectionnées).

html
<pre id="resultat_sortie"></pre>
<div id="element_teste">L'élément à tester pour la visibilité.</div>

CSS

Le CSS met simplement en évidence l'élément à tester.

css
#element_teste {
  border: solid;
  border-color: blue;
}

JavaScript

Le code ci-dessous récupère chacun des éléments <select>. La méthode actualiserCss() est appelée au démarrage et à chaque fois que les éléments de sélection changent, afin d'appliquer le CSS sélectionné à l'élément cible.

js
const affichageCssSelect = document.getElementById("css_affichage");
const visibiliteContenuAffichageCss = document.getElementById(
  "css_visibilite_contenu",
);
const opaciteCssSelect = document.getElementById("css_opacite");
const visibiliteCssSelect = document.getElementById("css_visibilite");

const resultatSortie = document.getElementById("resultat_sortie");
const elementTeste = document.getElementById("element_teste");

actualiserCss();

const selecteursCss = document.querySelectorAll("select");
selecteursCss.forEach((select) => {
  select.addEventListener("change", (event) => {
    actualiserCss();
  });
});

function actualiserCss() {
  // Applique les propriétés CSS sélectionnées à l'élément cible
  elementTeste.style.display = affichageCssSelect.value;
  elementTeste.style.contentVisibility = visibiliteContenuAffichageCss.value;
  elementTeste.style.opacity = opaciteCssSelect.value;
  elementTeste.style.visibility = visibiliteCssSelect.value;

  // Appelle checkVisibility() sur l'élément en utilisant les options par défaut et chacune des options
  const resultatVisibiliteDefaut = elementTeste.checkVisibility();
  const resultatVisibiliteOpacite = elementTeste.checkVisibility({
    opacityProperty: true,
  });
  const resultatVisibiliteCss = elementTeste.checkVisibility({
    visibilityProperty: true,
  });
  const resultatVisibiliteContenuAuto = elementTeste.checkVisibility({
    contentVisibilityAuto: true,
  });
  // Affiche les résultats des tests
  resultatSortie.innerText = `Vérifications sur l'élément ci-dessous (peut être masqué) :
- Résultat de checkVisibility() : ${resultatVisibiliteDefaut}
- Résultat de checkVisibility({opacityProperty: true}) : ${resultatVisibiliteOpacite}
- Résultat de checkVisibility({visibilityProperty: true}) : ${resultatVisibiliteCss}
- Résultat de checkVisibility({contentVisibilityAuto: true}) : ${resultatVisibiliteContenuAuto}`;
}

Résultat

Les résultats sont affichés ci-dessous. Si vous changez la sélection, les résultats s'appliquent à l'élément de test (contour bleu) et les résultats de checkVisibility() pour chaque réglage s'affichent. Par exemple, si vous définissez opacity: 0, ce test (seul) indique false. En revanche, si vous définissez display: none, tous les tests retournent false.

Spécifications

Spécification
CSSOM View Module
# dom-element-checkvisibility

Compatibilité des navigateurs

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu