Überprüfen Sie die Element-CSS-Anzeige mit JavaScript

Ist es möglich zu überprüfen, ob das CSS eines Elements display == blockoder noneJavaScript?

Elemente haben eine styleEigenschaft, die Ihnen sagt, was Sie wollen, wenn der Stil inline oder mit JavaScript deklariert wurde:

console.log(document.getElementById('someIDThatExists').style.display);

gibt Ihnen einen Zeichenfolgenwert.

Wie sdleihssirhc weiter unten sagt, displaymüssen Sie den berechneten Stil erhalten , wenn das Element geerbt oder durch eine CSS-Regel angegeben wird:

return getComputedStyle(element, null).display;

Wenn der Stil inline oder mit JavaScript deklariert wurde, können Sie einfach an die style Objekt gelangen:

return element.style.display === 'block';

Andernfalls müssen Sie den berechneten Stil ermitteln, und es gibt Browser-Inkonsistenzen. IE verwendet ein einfaches currentStyleObjekt, aber alle anderen verwenden eine Methode:

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

Das nullwar in Firefox Version 3 und darunter erforderlich.

Meinst du für jQuery so?

$('#object').css('display');

Sie können es so überprüfen:

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

Diese Antwort ist nicht genau das, was Sie wollen, kann aber in einigen Fällen nützlich sein. Wenn Sie wissen, dass das Element bei der Anzeige einige Dimensionen aufweist, können Sie auch Folgendes verwenden:

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

EDIT: Warum ist dies möglicherweise besser als die direkte Überprüfung der CSS- displayEigenschaft? Weil Sie nicht alle übergeordneten Elemente überprüfen müssen. Wenn ein übergeordnetes Element vorhanden ist display: none, werden auch die untergeordneten Elemente ausgeblendet, haben es jedoch weiterhin element.style.display !== 'none'.

Ja.

var displayValue = document.getElementById('yourid').style.display;

Grundlegendes JavaScript:

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}

Um herauszufinden, ob es mit einfachem JavaScript sichtbar ist, überprüfen Sie, ob die Anzeigeeigenschaft 'none' ist (prüfen Sie nicht, ob 'block' vorhanden ist, sie kann auch leer oder 'inline' sein und weiterhin sichtbar sein):

var isVisible = (elt.style.display != "none");

Wenn Sie jQuery verwenden, können Sie stattdessen Folgendes verwenden:

var isVisible = $elt.is(":visible");

Mit reinem Javascript können Sie die style.displayEigenschaft überprüfen . Mit jQuery können Sie verwenden$('#id').css('display')

Sie können dies beispielsweise mit jQuery überprüfen:

$("#elementID").css('display');

Es wird eine Zeichenfolge mit Informationen zur Anzeigeeigenschaft dieses Elements zurückgegeben.