JS Check If Element Is Visible: How to Check It?

Are you looking for the solution of “JS check if element is visible”? There are many options to solve this kind of problem and in this blog, we will provide you with an effective method.

What is JS(JavaScript) & element?

JavaScript's initial purpose was to "bring web pages to life." We refer to this programming language as a script. Scripts can be written within HTML and will automatically execute when the page loads. Scripts exist and run as plain text. They don't require special preparation or compilation to run. In this aspect, JavaScript differs significantly from Java.

Why is it called JavaScript? When JavaScript was first created, it was named "LiveScript." However, due to the popularity of Java at that time, it was decided that associating this new language with Java would help its popularity.

With the development of JavaScript, it has become a standalone language and has its own language specification called ECMAScript. Now, it has no relation to Java whatsoever.

Currently, JavaScript can be executed not only within browsers but also on the server-side and even on devices that have a JavaScript engine. Browsers embed JavaScript engines, sometimes referred to as JavaScript virtual machines.

In summary, JavaScript is a programming language that runs on web browsers, and we call this programming language a script. A scripting language is executed within the browser and is a piece of code, not software. Scripting languages can be added to websites built using HTML and CSS, and they automatically execute when the page loads. They play a crucial role in implementing various dynamic effects and interactions on the page.

For example, when shopping in an online store, JavaScript is needed for functionalities like using the shopping cart and estimating costs. Without JavaScript, the checkout process and other cart operations would not be possible.

And when we talk about "elements" in the context of web development, we refer to the building blocks that make up a web page. These elements can be various components such as headings, paragraphs, images, buttons, forms, tables, and more. With JavaScript, developers can add interactivity to web pages by responding to user actions like clicks and input. JavaScript provides the ability to directly manipulate and interact with these elements within a web browser.

JS check if element is visible: How to do it?

Checking whether an element is visible in JavaScript is useful in a variety of scenarios. You may want to trigger certain actions or display specific content only when the element is visible to the user. For example, you might want to display a "read more" button when long text exceeds a certain height and becomes scrollable.

If you're implementing animations or visual effects, it's important to determine if an element is visible before applying the animation or effect to it.

Checking the visibility of an element can help optimize the performance of your web page or application. You can minimize unnecessary processing and improve overall performance by selectively applying actions or calculations only to visible elements.

   <div id="top_ele">Top element</div>
   <div id="bottom_ele">Bottom element</div>
   function isElementInViewPort(element){
     let rect = element.getBoundingClientRect();
     console.log("The bounding Rect of element is ", rect)
     // get the height of the window
     let viewPortBottom = window.innerHeight || document.documentElement.clientHeight;
     // get the width of the window
     let viewPortRight = window.innerWidth || document.documentElement.clientWidth;


     let isTopInViewPort = >= 0,
         isLeftInViewPort = rect.left >= 0,
         isBottomInViewPort = rect.bottom <= viewPortBottom,
         isRightInViewPort = rect.right <= viewPortRight;


    // check if element is completely visible inside the viewport
    return (isTopInViewPort && isLeftInViewPort && isBottomInViewPort && isRightInViewPort);
   let topEle = document.getElementById('top_ele');
    console.log("Is top element visible:  ", isElementInViewPort(topEle) )


  let bottomEle = document.getElementById('bottom_ele');
  console.log("Is bottom element visible:  ", isElementInViewPort(bottomEle) )


This code checks if two elements, identified by their IDs "top_ele" and "bottom_ele", are visible within the viewport of a web page. It uses the getBoundingClientRect method to get the position and size of each element, and then compares it with the dimensions of the viewport. The function isElementInViewPort returns true if an element is completely visible in the viewport, and false otherwise. The results are logged to the console for the "top_ele" and "bottom_ele" elements.

Final words

JS check if element is visible can be done by some tools, like WeTest. For example, WeTest's automation capabilities allow testers to use JavaScript to check if specific elements are visible before interacting with them. developers and testers can ensure that their web applications are thoroughly tested for correct element visibility and behavior, resulting in a high-quality user experience.

Latest Posts
1Exploring Valuable Test Cases in the Android Official MVP Project: A Comprehensive Guide to Unit Tes This article serves as an appendix to "Interpreting the Unit Testing of the Android Official MVP Project". This MVP project and its unit testing cases can provide many insights for our work, so it is worth giving it a quick read.
2A Comprehensive Guide to XSS Attacks and Defenses This article provides a detailed introduction to XSS(Cross Site Scripting) vulnerability attacks and defenses, including vulnerability basics, XSS fundamentals, encoding basics, XSS Payload, and XSS attack defense.
3How to Make Your Go Program Run Faster? This article is about the Go language. It primarily focuses on runtime speed, rather than development speed – these two types of speed are distinct.
4Enhancing Mobile App Quality with Crowdsourced Testing: Benefits and Key Components In this article, we will explore the benefits of employing crowdsourcing for mobile app testing and discuss the key components that contribute to successful testing, including testing on different devices, languages, and locations.
5Video Game Testing: A Fun and Profitable Way to Make Money Playing Games In this article, we will explore various avenues through which you can potentially earn a substantial income by playing games, including creating guides, writing reviews, coaching and boosting, and game testing.