Wie prüfe ich, ob ein Element in jQuery ausgeblendet ist?

Question

Ist es möglich, die Sichtbarkeit eines Elements umzuschalten, indem man die Funktionen .hide() , .show() ou .toggle() ?

Wie würden Sie testen, ob ein Element visible ou hidden ?

Answer 1

Es gibt zwei Möglichkeiten, die Sichtbarkeit eines Elements zu überprüfen.

if($('.selector').is(':visible')){
    // element is visible
}else{
    // element is hidden
}

oder

if($('.selector:visible')){
    // element is visible
}else{
    // element is hidden
}

Answer 2

Mit der versteckten Auswahl können Sie alle versteckten Elemente abgleichen

$('element:hidden')

Mit der sichtbaren Auswahl können Sie alle sichtbaren Elemente abgleichen

$('element:visible')

Answer 3

Erweiterte Funktion zur Überprüfung, ob ein Element sichtbar ist, ob es nicht angezeigt wird oder ob es eine Deckkraft hat

Sie gibt zurück false wenn das Element nicht sichtbar ist.

function checkVisible(e) {
    if (!(e instanceof Element)) throw Error('not an Element');
    const elementStyle = getComputedStyle(e);
    if (elementStyle.display === 'none' || elementStyle.visibility !== 'visible' || elementStyle.opacity < 0.1) return false;
    if (e.offsetWidth + e.offsetHeight + e.getBoundingClientRect().height +
        e.getBoundingClientRect().width === 0) {
        return false;
    }
    const elemCenter   = {
        x: e.getBoundingClientRect().left + e.offsetWidth / 2,
        y: e.getBoundingClientRect().top + e.offsetHeight / 2
    };
    if (elemCenter.x < 0 || elemCenter.y < 0) return false;
    if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
    if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
    let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
    do {
        if (pointContainer === e) return true;
    } while (pointContainer = pointContainer.parentNode);
    return false;
}

Answer 4

Eine jQuery-Lösung, aber es ist immer noch ein bisschen besser für diejenigen, die den Button-Text auch ändern wollen:

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

Answer 5

Wenn Sie prüfen möchten, ob ein Element auf der Seite sichtbar ist, abhängig von der Sichtbarkeit seines Elternteils, können Sie prüfen, ob width et height des Elements sind beide gleich 0 .

jQuery

$element.width() === 0 && $element.height() === 0

Vanille

element.clientWidth === 0 && element.clientHeight === 0

Oder

element.offsetWidth === 0 && element.offsetHeight === 0