June 5, 2020

How to Check If Element is Hidden in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check if element is hidden in javascript. As you already know that if you want to toggle the visibility of an element dynamically based on a certain condition, then javascript would be your first choice.

However, when it comes to CSS, we have display and visibility properties that are used to change the visibility of an element, but they do have a slight difference.

When you set the visibility property of an element to hidden, the element will be hidden but the space occupied by it will remain intact. This means you will see a blank space there. On the other hand, to hide an element with display property, you have to set it to none. This makes the element completely invisible and the space occupied by the element will also be removed like it never existed.

In javascript, we have access to the global window object. This object has getComputedStyle() method which returns a style object. With the help of this style object, we can get all the styles of an element. This means we can easily detect the visibility of an element since now we have access to display and visibility properties.

In the following example, we will check the visibility of the span element upon click of a button and display its state in the h1 element. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, button, span, and h1). The div element is just a wrapper for the rest of the elements.
The button element and h1 element have “Check” and “Result” as innerText respectively.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <button>Check</button>
        <h1>Result</h1>
        <span>SPAN</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

div {
    display: flex;
    align-items: center;
    flex-direction: column;
}

span {
    display: block;
    padding: 10px;
    border: 1px solid black;
    text-align: center;
    width: 25%;
}

Javascript

We have selected the button, span, and h1 elements using the document.querySelector() method and stored them in the btnCheck, span, and result variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are calling getComputedStyle() method of the window object and passing it the span element as a parameter.
In case of display property, its value will be none if the element is hidden.
In case of visibility property, its value will be hidden if the element is hidden.
We are using equality (==) operator and logical OR (||) operator along with display and visibility properties to verify the visibility of the span element. Depending upon the result of the verification, we will show “Hidden” or “Visible” in the h1 element using innerText property.

let btnCheck = document.querySelector('button');
let span = document.querySelector('span');
let result = document.querySelector('h1');

btnCheck.addEventListener('click', () => {
    let spanStyle = window.getComputedStyle(span);

    result.innerText = spanStyle.display == 'none' || spanStyle.visibility == 'hidden' ? 'Hidden' : 'Visible';
});

You May Also Like: