Obtenga solo el elemento visible usando javascript puro

Solución:

Aquí hay algo que puede usar, Javascript puro:

// Get all elements on the page (change this to another DOM element if you want)
var all = document.getElementsByTagName("*");

for (var i = 0, max = all.length; i < max; i++) {
    if (isHidden(all[i]))
        // hidden
    else 
        // visible
}

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

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);
    }
}

Primero obtenemos todos los elementos usando el documento querySelectorAll. Luego, necesitamos iterar sobre todos los elementos. Para obtener el estilo, use getComputedStyle.

Después de eso: marca visible solo para visualización y lo hacemos de la misma manera.

Un enfoque más integral:

function isVisible(el) {
        while (el) {
            if (el === document) {
                return true;
            }

            var $style = window.getComputedStyle(el, null);

            if (!el) {
                return false;
            } else if (!$style) {
                return false;
            } else if ($style.display === 'none') {
                return false;
            } else if ($style.visibility === 'hidden') {
                return false;
            } else if (+$style.opacity === 0) {
                return false;
            } else if (($style.display === 'block' || $style.display === 'inline-block') &&
                $style.height === '0px' && $style.overflow === 'hidden') {
                return false;
            } else {
                return $style.position === 'fixed' || isVisible(el.parentNode);
            }
        }
    }

Esto comprobaría cualquier posible forma en que un elemento pueda ser visible en el dom que yo sepa menos los casos del índice z.

Usar getBoundingClientRect. Devolverá la altura y el ancho de cero si el elemento no está en el DOM o no se muestra.

Tenga en cuenta que esto no se puede utilizar para determinar si un elemento no es visible debido a visibility: hidden o opacity: 0. AFAIK, este comportamiento es idéntico al jQuery :visible “selector”. Aparentemente jQuery usa offsetHeight y offsetWidth de cero para comprobar la no visibilidad.

Esta solución tampoco verificará si el elemento no es visible debido a que está fuera de la pantalla (aunque puede verificarlo con bastante facilidad), o si el elemento está oculto detrás de algún otro elemento.

Vea también Detectar si un elemento es visible (sin usar jquery)

---

---

Utiliza Nuestro Buscador