Accessing only the visible elements using vanilla JavaScript

Question

Accessing only the visible elements using vanilla JavaScript

Here are some elements I have:

<div class="one">send Message</div>

<div class="one">send Message</div>

<div class="one">send Message</div>

In a web page, there are send buttons like the ones above. Only one button is visible at a time, while the other two are hidden using JavaScript. For example, if the second button is visible, I want to access only that specific element.

My code would look something like this:

document.querySelector(".one:visible");

Using jQuery, the code would be $(".one:visible");, which works well. However, I am interested in how to achieve this using pure JavaScript.

javascript

Answer 1

Answer №1

Check out this Javascript code snippet for identifying hidden elements:

// Iterate through all elements on the page (modify to target specific DOM element)
var allElements = document.getElementsByTagName("*");

for (var index = 0, totalElements = allElements.length; index < totalElements; index++) {
    if (isElementHidden(allElements[index]))
        // Element is hidden
    else 
        // Element is visible
}

function isElementHidden(element) {
    var style = window.getComputedStyle(element);
    return ((style.display === 'none') || (style.visibility === 'hidden'))
}

Answer 2

Check out this Javascript code snippet for identifying hidden elements:

// Iterate through all elements on the page (modify to target specific DOM element)
var allElements = document.getElementsByTagName("*");

for (var index = 0, totalElements = allElements.length; index < totalElements; index++) {
    if (isElementHidden(allElements[index]))
        // Element is hidden
    else 
        // Element is visible
}

function isElementHidden(element) {
    var style = window.getComputedStyle(element);
    return ((style.display === 'none') || (style.visibility === 'hidden'))
}

Answer 3

Answer №2

I wanted to share a more concise alternative:

const elements = Array.from(document.querySelectorAll('.one')).filter(el =>
   window.getComputedStyle(el).getPropertyValue('display') != 'none'
);

This code snippet retrieves all elements where the CSS property display: block is applied.

Answer 4

I wanted to share a more concise alternative:

const elements = Array.from(document.querySelectorAll('.one')).filter(el =>
   window.getComputedStyle(el).getPropertyValue('display') != 'none'
);

This code snippet retrieves all elements where the CSS property display: block is applied.

Answer 5

Answer №3

To accurately determine the height and width of an element, you can utilize the getBoundingClientRect method. This method will provide values of zero if the element is not currently in the DOM or if it is not being displayed.

It's important to note that using getBoundingClientRect won't help you identify whether an element is invisible due to CSS properties like visibility: hidden or opacity: 0. In such cases, jQuery also employs similar approaches through :visible selector by checking for offsetHeight and offsetWidth values of zero.

In addition, while this method can confirm visibility within the viewport, it may not detect if the element is obscured by other elements on the page. However, with some additional logic, you could address these scenarios as well.

For further insights on detecting element visibility without relying on jQuery, refer to this resource.

Answer 6

To accurately determine the height and width of an element, you can utilize the getBoundingClientRect method. This method will provide values of zero if the element is not currently in the DOM or if it is not being displayed.

It's important to note that using getBoundingClientRect won't help you identify whether an element is invisible due to CSS properties like visibility: hidden or opacity: 0. In such cases, jQuery also employs similar approaches through :visible selector by checking for offsetHeight and offsetWidth values of zero.

In addition, while this method can confirm visibility within the viewport, it may not detect if the element is obscured by other elements on the page. However, with some additional logic, you could address these scenarios as well.

For further insights on detecting element visibility without relying on jQuery, refer to this resource.

Answer 7

Answer №4

var $el = document.querySelectorAll('.one');
var visibleElements;

for (var i = 0; i < $el.length; i++) {
    var currentElement = $el[i];
    var $style = window.getComputedStyle(currentElement, null);

    if (!currentElement) {
        return false;
    } else if (!$style) {
        return false;
    } else if ($style.display === 'none') {
        return false;
    } else {
        visibleElements.push(currentElement);
    }
}

We start by selecting all elements using document querySelectorAll. Then, there is a loop to iterate through each element and check its visibility using getComputedStyle.

The visibility check in the first code snippet only considers display property. In the second code snippet, we have a function that checks for various visibility aspects including display, visibility, opacity, height, overflow, and position.

This function provides a more comprehensive approach to checking an element's visibility in the DOM, covering many scenarios except for z-index cases.

Answer 8

var $el = document.querySelectorAll('.one');
var visibleElements;

for (var i = 0; i < $el.length; i++) {
    var currentElement = $el[i];
    var $style = window.getComputedStyle(currentElement, null);

    if (!currentElement) {
        return false;
    } else if (!$style) {
        return false;
    } else if ($style.display === 'none') {
        return false;
    } else {
        visibleElements.push(currentElement);
    }
}

We start by selecting all elements using document querySelectorAll. Then, there is a loop to iterate through each element and check its visibility using getComputedStyle.

The visibility check in the first code snippet only considers display property. In the second code snippet, we have a function that checks for various visibility aspects including display, visibility, opacity, height, overflow, and position.

This function provides a more comprehensive approach to checking an element's visibility in the DOM, covering many scenarios except for z-index cases.

Answer 9

Answer №5

For those who opt to utilize the hidden attribute:

document.querySelector(".one:not([hidden])");

Answer 10

For those who opt to utilize the hidden attribute:

document.querySelector(".one:not([hidden])");

Answer 11

Answer №6

jQuery's :visible selector simply checks the display property to determine visibility status.

(window.getComputedStyle(el).getPropertyValue('display') !== 'none')

While this may suffice for basic needs, it falls short in more complex scenarios. For a thorough solution, continue reading.

Utilizing both Element.getBoundingClientRect() and window.getComputedStyle() can effectively detect element visibility within the viewport.

Solely relying on getBoundingRect() or getComputedStyle() is not optimal for performance. Combining these two functions yields the best results (approximately 22% faster than using getComputedStyle() alone).

function inViewport(els) {
    let matches = [],
        elCt = els.length;

    for (let i=0; i<elCt; ++i) {
        let el = els[i],
            b = el.getBoundingClientRect(), c;

        if  (b.width > 0 && b.height > 0 &&
            b.left+b.width > 0 && b.right-b.width < window.outerWidth && 
            b.top+b.height > 0 && b.bottom-b.width < window.outerHeight && 
            (c = window.getComputedStyle(el)) &&
            c.getPropertyValue('visibility') === 'visible' &&
            c.getPropertyValue('opacity') !== 'none') {
            matches.push(el);
        }
    }
    return matches;
}

Here's an example of how to use this function...

var els = document.querySelectorAll('.one'),
    visibleEls = inViewport(els);

This method ensures that elements are not hidden (display set to "none"), visible in the viewport, with positive dimensions, and fully contained within the viewport boundaries.

Answer 12

jQuery's :visible selector simply checks the display property to determine visibility status.

(window.getComputedStyle(el).getPropertyValue('display') !== 'none')

While this may suffice for basic needs, it falls short in more complex scenarios. For a thorough solution, continue reading.

Utilizing both Element.getBoundingClientRect() and window.getComputedStyle() can effectively detect element visibility within the viewport.

Solely relying on getBoundingRect() or getComputedStyle() is not optimal for performance. Combining these two functions yields the best results (approximately 22% faster than using getComputedStyle() alone).

function inViewport(els) {
    let matches = [],
        elCt = els.length;

    for (let i=0; i<elCt; ++i) {
        let el = els[i],
            b = el.getBoundingClientRect(), c;

        if  (b.width > 0 && b.height > 0 &&
            b.left+b.width > 0 && b.right-b.width < window.outerWidth && 
            b.top+b.height > 0 && b.bottom-b.width < window.outerHeight && 
            (c = window.getComputedStyle(el)) &&
            c.getPropertyValue('visibility') === 'visible' &&
            c.getPropertyValue('opacity') !== 'none') {
            matches.push(el);
        }
    }
    return matches;
}

Here's an example of how to use this function...

var els = document.querySelectorAll('.one'),
    visibleEls = inViewport(els);

This method ensures that elements are not hidden (display set to "none"), visible in the viewport, with positive dimensions, and fully contained within the viewport boundaries.

Accessing only the visible elements using vanilla JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The problem persists as Vite is failing to load CSS codes enclosed within VUE components

Google Chrome does not support inlined sources when it comes to source maps

Unable to communicate with Node.js websocket server from React client

Steps to create a custom function that can manage numerous onclick actions to toggle the visibility of a specific field

Learning to retrieve specific properties from an event target in JavaScript

A TypeScript-enabled functional React component utilizing an onClick event handler for an anchor tag

End-to-end testing using AngularJS Protractor is conducted to verify the message: 'Application has already been bootstrapped with this element'

Creating an engaging Uikit modal in Joomla to captivate your audience

What could be causing the discrepancy in the model value when using checkboxes in AngularJS?

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

Looking for jQuery developers to notify users that IE6 is not compatible

Three.js: sleek camera sliding gracefully around a central point

Exploring the method of displaying a JSON 2D array through the utilization of getJSON

The functionality of two-way binding in a distinct controller is not functioning properly when integrated with angular-wizard

What is the best way to adjust the height of an IFrame to match the size of its content?

Is there a way to invoke a class method from the HTML that is specified within its constructor function?

Using a combination of Internet Explorer, jQuery, Ajax, and XHTML can lead to HTML content being truncated after using either the .html

Unable to define attributes of a non-existent element (specifically 'innerHTML') within a Vanilla JavaScript component

How can I update the source of an HTML video element seamlessly without causing any glitches?

Is it possible for me to define TypeScript interfaces to be used in vanilla JavaScript projects within VSCode?