How to Check Element Visibility in JavaScript

To check the visibility of an element in JavaScript, you can use several methods depending on the type of visibility you’re interested in: whether the element is present in the DOM, whether it’s visible in the viewport, or whether it’s styled as visible. Here are some common approaches:

1. Check if an Element is in the DOM#

To check if an element exists in the DOM, you can use document.querySelector or document.getElementById and then see if the result is not null:

const element = document.querySelector("#myElement"); // or document.getElementById('myElement')
if (element) {
    console.log("Element exists in the DOM");
} else {
    console.log("Element does not exist in the DOM");
}

2. Check if an Element is Visible (CSS Visibility)#

To check if an element is visible based on its CSS styles (display, visibility, etc.), you can use:

function isElementVisible(el) {
    if (!el) return false;

    const style = window.getComputedStyle(el);

    return (
        style.display !== "none" &&
        style.visibility !== "hidden" &&
        style.opacity > 0
    );
}

const element = document.querySelector("#myElement");
if (isElementVisible(element)) {
    console.log("Element is visible");
} else {
    console.log("Element is not visible");
}

3. Check if an Element is in the Viewport#

To check if an element is within the visible portion of the viewport, you can use:

function isElementInViewport(el) {
    if (!el) return false;

    const rect = el.getBoundingClientRect();
    const windowHeight =
        window.innerHeight || document.documentElement.clientHeight;
    const windowWidth =
        window.innerWidth || document.documentElement.clientWidth;

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= windowHeight &&
        rect.right <= windowWidth
    );
}

const element = document.querySelector("#myElement");
if (isElementInViewport(element)) {
    console.log("Element is in the viewport");
} else {
    console.log("Element is not in the viewport");
}

4. Check if an Element is Hidden via Overflow#

Sometimes an element might be within the viewport but hidden by its parent due to overflow settings. To handle this, you may need a more complex check:

function isElementInViewport(el) {
    if (!el) return false;

    const rect = el.getBoundingClientRect();
    const windowHeight =
        window.innerHeight || document.documentElement.clientHeight;
    const windowWidth =
        window.innerWidth || document.documentElement.clientWidth;

    return (
        rect.top < windowHeight &&
        rect.bottom >= 0 &&
        rect.left < windowWidth &&
        rect.right >= 0
    );
}

function isElementCompletelyVisible(el) {
    if (!el) return false;

    const rect = el.getBoundingClientRect();
    const parent = el.parentElement;
    const parentRect = parent
        ? parent.getBoundingClientRect()
        : {
              top: 0,
              left: 0,
              bottom: window.innerHeight,
              right: window.innerWidth,
          };

    return (
        rect.top >= parentRect.top &&
        rect.left >= parentRect.left &&
        rect.bottom <= parentRect.bottom &&
        rect.right <= parentRect.right
    );
}

const element = document.querySelector("#myElement");
if (isElementCompletelyVisible(element)) {
    console.log("Element is completely visible within its parent");
} else {
    console.log("Element is not completely visible within its parent");
}

Summary#

• Existence in DOM: Use document.querySelector or document.getElementById to check if the element exists.
• CSS Visibility: Use window.getComputedStyle to check CSS properties like display, visibility, and opacity.
• Viewport Visibility: Use getBoundingClientRect to determine if the element is within the viewport.
• Overflow Visibility: Additional checks can be used to determine if the element is visible within its parent’s boundaries.

Choose the method that best suits your needs based on what type of visibility you need to check.