How to Find Out if an Element is Hidden with JavaScript?

Last Updated : 30 Jul, 2024

JavaScript provides the feature of DOM manipulation, allowing developers to dynamically interact with and modify the content and structure of a web page. One common task is determining if an element is hidden, which can be achieved through various methods such as checking the element's display or visibility properties or using properties like offsetParent.

These are the approaches we will be using to find out if an element is hidden with javascript:

Table of Content

Checking the display Property
Using offsetParent to Check Visibility

Checking the display Property

In this approach, we are using the display property to check if an element is hidden or visible. The checkFn function retrieves the element and checks its computed display style; if it is none, the element is hidden. The showFn function removes the hidden class from the element to make it visible and displays a message div by setting its display style to block.

Example: The below example performs Checking the display Property to find out if an element is hidden with JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 1</title>
    <style>
        h1 {
            color: green;
        }

        .hidden {
            display: none;
        }

        .fancy {
            display: none;
            width: 70px;
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
            margin-top: 20px;
            border-radius: 8px;
            font-size: 1.2em;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 1: Checking the Display Property</h3>
    <p id="element1" class="hidden">This element
      is hidden using display: none.</p>
    <button onclick="checkFn()">Check Visibility</button>
    <button onclick="showFn()">Show Element</button>
    <p id="result1"></p>
    <div id="fancyDiv" class="fancy">GFG Message</div>

    <script>
        function checkFn() {
            const element = document.getElementById('element1');
            const result = document.getElementById('result1');
            if (window.getComputedStyle(element).display === 'none') {
                result.textContent = 'The element is hidden (display: none).';
            } else {
                result.textContent = 'The element is visible.';
            }
        }

        function showFn() {
            const element = document.getElementById('element1');
            const fancyDiv = document.getElementById('fancyDiv');
            element.classList.remove('hidden');
            fancyDiv.style.display = 'block';
        }
    </script>
</body>

</html>

Output:

Using offsetParent to Check Visibility

In this approach, we are using the offsetParent property to determine if an element is visible. The checkFn function checks if the offsetParent of the element is null; if it is, the element is hidden. The showFn function removes the hidden class from the element to make it visible and displays a div with a welcome message.

Example: The below example uses offsetParent to find out if an element is hidden with JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 2</title>
    <style>
        h1 {
            color: green;
        }

        .hidden {
            display: none;
        }

        .fancy {
            display: none;
            background-color: #FF5722;
            color: white;
            padding: 10px;
            margin-top: 20px;
            border-radius: 8px;
            font-size: 1.2em;
            width: 200px;
            margin: 0 auto;
        }

        #ele3 {
            background-color: lightgrey;
            padding: 10px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 2: Using offsetParent to Check Visibility</h3>
    <div id="ele3" class="hidden">
        This element is hidden using display: none.
    </div>
    <button onclick="checkFn()">Check Visibility</button>
    <button onclick="showFn()">Show Element</button>
    <p id="res"></p>
    <div id="fancyDiv" class="fancy">Welcome to GeeksforGeeks!</div>

    <script>
        function checkFn() {
            const element = document.getElementById('ele3');
            const result = document.getElementById('res');
            if (!element.offsetParent) {
                result.textContent = 'The element is hidden (offsetParent is null).';
            } else {
                result.textContent = 'The element is visible.';
            }
        }

        function showFn() {
            const element = document.getElementById('ele3');
            const fancyDiv = document.getElementById('fancyDiv');
            element.classList.remove('hidden');
            fancyDiv.style.display = 'block';
        }
    </script>
</body>

</html>

Output:

JavaScript- Find the HTML Label Associated with a Given Input Element in JS

gpancomputer

Improve

Article Tags :

How to Find Out if an Element is Hidden with JavaScript?

Checking the display Property

Using offsetParent to Check Visibility

Similar Reads

Thank You!

What kind of Experience do you want to share?