Überprüfen Sie das Element-CSS-Display mit JavaScript

Question

Ist es möglich zu überprüfen, ob das CSS-Attribut display == block oder none eines Elements mit JavaScript festgelegt ist?

Answer 1

Wie sdleihssirhc unten sagt, wenn das display des Elements vererbt wird oder durch eine CSS-Regel festgelegt wird, müssen Sie seinen berechneten Stil abrufen:

return window.getComputedStyle(element, null).display;

Elemente haben eine style-Eigenschaft, 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.

Answer 2

Wenn der Stil inline oder mit JavaScript deklariert wurde, können Sie einfach auf das style-Objekt zugreifen:

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

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

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

Das null war erforderlich in Firefox Version 3 und darunter.

Answer 3

Für jQuery, meinst du so etwas?

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

Du kannst es so überprüfen:

if($('#object').css('display') === 'block')
{
    //etwas tun
}
else
{
    //etwas anderes
}

Answer 4

Diese Antwort ist zwar nicht genau das, was du wolltest, aber sie könnte in einigen Fällen nützlich sein. Wenn du weißt, dass das Element bestimmte Abmessungen hat, wenn es angezeigt wird, kannst du auch dies verwenden:

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

BEARBEITEN: Warum könnte dies besser sein als die direkte Überprüfung der CSS display Eigenschaft? Weil du nicht alle Elternelemente überprüfen musst. Wenn ein Elternelement display: none hat, sind dessen Kinder auch versteckt, aber haben dennoch element.style.display !== 'none'.

Answer 5

Ja.

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