Pricing

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.


<html>
 <head>
 </head>
 <body>
   <div id="top_ele">Top element</div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   <div id="bottom_ele">Bottom element</div>
 </body>
 <script>
   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 = rect.top >= 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) )
  </script>
</html>

 

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
1How Can I See FPS in Games | In-depth Review How can i see fps in games? FPS in games can be viewed by enabling the option in the game itself or by using third-party software.
2Let's Connect at GQF 2024: Meet Us in Person! WeTest will be participating as Silver Partner in GQF 2024. Come and visit!
3What is Quality Management for Games? Detailed Overview What is quality management in games? It is a systematic method of the attainment of pre-determined quality for games that enhances their quality through processes and methods.
4How to Write Bug Reports? In-depth Review How to write a bug report: Learn how to make effective bug reports aimed at helping developers easily understand them, pinpoint the bugs and start working on their elimination.
5How To Make Test Cases in Software Testing? In-depth Review How to make test cases in software testing: Using this guide game testers can learn about how to develop proper test cases for software testing of the games to achieve good quality games.