Element: checkVisibility() Methode
Baseline 2024Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die checkVisibility() Methode des Element Interface prüft, ob das Element sichtbar ist.
Die Methode gibt in einer der folgenden Situationen false zurück:
- Das Element hat keine zugeordnete Box, zum Beispiel weil die CSS-Eigenschaft
displayaufnoneodercontentsgesetzt ist. - Das Element wird nicht gerendert, weil das Element oder ein übergeordnetes Element die
content-visibilityEigenschaft aufhiddensetzt.
Der optionale Parameter ermöglicht zusätzliche Prüfungen, um andere Interpretationen von "sichtbar" zu testen.
Zum Beispiel kann zusätzlich geprüft werden, ob ein Element eine Deckkraft von 0 hat, ob der Wert der Eigenschaft visibility des Elements es unsichtbar macht oder ob die Eigenschaft content-visibility des Elements den Wert auto hat und das Rendering derzeit übersprungen wird.
Syntax
checkVisibility(options)
Parameter
optionsOptional-
Ein Objekt, das zusätzliche Prüfungen angibt. Die möglichen Optionen sind:
contentVisibilityAuto-
true, um zu prüfen, ob die Eigenschaftcontent-visibilitydes Elements den Wertautohat (oder erbt) und das Rendering aktuell übersprungen wird. Standardmäßigfalse. opacityProperty-
true, um zu prüfen, ob die Eigenschaftopacitydes Elements den Wert0hat (oder erbt). Standardmäßigfalse. visibilityProperty-
true, um zu prüfen, ob das Element aufgrund des Werts seinervisibilityEigenschaft unsichtbar ist. Standardmäßigfalse.Hinweis: Unsichtbare Elemente schließen jene ein, die die Eigenschaft
visibility: hiddenhaben, und einige Elementtypen, dievisibility: collapsehaben. checkOpacity-
Ein historisches Alias für
opacityProperty. checkVisibilityCSS-
Ein historisches Alias für
visibilityProperty.
Rückgabewert
false, wenn eine der folgenden Bedingungen erfüllt ist, ansonsten true:
- Das Element hat keine zugeordnete Box.
- Die Eigenschaft
content-visibilitydes Elements hat (oder erbt) den Werthidden. opacityProperty(odercheckOpacity) isttrueund die Eigenschaftopacitydes Elements hat (oder erbt) den Wert0.visibilityProperty(odercheckVisibilityCSS) isttrueund das Element ist aufgrund des Wertes seinervisibilityEigenschaft unsichtbar.contentVisibilityAutoisttrue, diecontent-visibilityEigenschaft hat (oder erbt) den Wertauto, und das Rendering des Elements wird übersprungen.
Beispiele
Testen von checkVisibility() mit unterschiedlichen CSS
Das folgende Beispiel ermöglicht es Ihnen zu testen, wie sich das Ergebnis von checkVisibility() mit unterschiedlichen Werten für die CSS-Eigenschaften display, content-visibility, visibility und opacity ändern kann.
HTML
Das HTML definiert ein Element für die CSS-Eigenschaften, die die Ergebnisse von checkVisibility() beeinflussen.
Die ersten (standardmäßig ausgewählten) Werte sollten dazu führen, dass checkVisibility() true zurückgibt, wenn sie auf ein Element angewendet werden, während die anderen Werte die Sichtbarkeit beeinflussen.
Danach haben wir ein , das verwendet wird, um das Ergebnis des checkVisibility() Checks auszugeben, wenn keine Optionen im Parameter übergeben werden, und für jeden separaten Optionswert.
Am Ende haben wir das Element, das getestet wird (auf das wir die ausgewählten CSS-Eigenschaftenwerte anwenden werden).
The element to be checked for visibility.
CSS
Das CSS hebt lediglich das zu testende Element hervor.
#test_element {
border: solid;
border-color: blue;
}
JavaScript
Der untenstehende Code erfasst jedes der Elemente.
Die updateCSS() Methode wird beim Start und immer dann aufgerufen, wenn sich die Auswahl der Elemente ändert, um das ausgewählte CSS auf das Ziel-Element anzuwenden.
const displayCssSelect = document.getElementById("css_display");
const contentVisibilityCssSelect = document.getElementById(
"css_content_visibility",
);
const displayCssOpacity = document.getElementById("css_opacity");
const displayCssVisibility = document.getElementById("css_visibility");
const outputResult = document.getElementById("output_result");
const elementToCheck = document.getElementById("test_element");
updateCSS();
const cssSelectors = document.querySelectorAll("select");
cssSelectors.forEach((select) => {
select.addEventListener("change", (event) => {
updateCSS();
});
});
function updateCSS() {
// Apply selected CSS properties to target element
elementToCheck.style.display = displayCssSelect.value;
elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value;
elementToCheck.style.opacity = displayCssOpacity.value;
elementToCheck.style.visibility = displayCssVisibility.value;
// Call checkVisibility() on element using default and each of options
const defaultVisibilityCheck = elementToCheck.checkVisibility();
const opacityVisibilityCheck = elementToCheck.checkVisibility({
opacityProperty: true,
});
const cssVisibilityCheck = elementToCheck.checkVisibility({
visibilityProperty: true,
});
const contentVisibilityAutoCheck = elementToCheck.checkVisibility({
contentVisibilityAuto: true,
});
// Output the results of the tests
outputResult.innerText = `Checks on element below (may be hidden):
- Result of checkVisibility(): ${defaultVisibilityCheck}
- Result of checkVisibility({opacityProperty: true}): ${opacityVisibilityCheck}
- Result of checkVisibility({visibilityProperty: true}): ${cssVisibilityCheck}
- Result of checkVisibility({contentVisibilityAuto: true}): ${contentVisibilityAutoCheck}`;
}
Ergebnis
Die Ergebnisse werden unten angezeigt.
Wenn Sie die Auswahl ändern, werden die Ergebnisse auf das Test-Element (blauer Umriss) angewendet und die Ergebnisse des checkVisibility() für jede Einstellung sollten angezeigt werden.
Wenn Sie zum Beispiel opacity: 0 einstellen, sollte dieser Test (nur) false angeben.
Wenn Sie jedoch display: none einstellen, sollten alle Tests false zurückgeben.
Spezifikationen
| Specification |
|---|
| CSSOM View Module # dom-element-checkvisibility |