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

92

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

javascript css

— Seth
quelle

108

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;

— Dan Davies Brackett
quelle

2

Was ist, wenn es kein Inline-CSS hat?

— Jscripter

5

Warum nicht einfach immer den berechneten Stil erhalten?

— Cade Galt

10

was ist currentStyle? document.body.currentStyle

— Ich habe noch

1

@vsync (und zum späteren Nachschlagen) Laut MDN ist es eine proprietäre Eigenschaft der alten Version von Internet Explorer.

— user202729

2

Danke für die Kommentare. Antwort für das moderne Web aktualisiert.

— Dan Davies Brackett

78

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.

— sdleihssirhc
quelle

sollte dies in diesem Fall nicht == sein?

— Kai Qing

@Kai Das Triple Equal macht keinen Typ Zwang. Crockford erklärt im Abschnitt " ===und !==Operatoren" , warum .

— sdleihssirhc

Das ist ziemlich interessant. Komisch, wie so etwas nach so vielen Jahren der Programmierung einfach unbemerkt bleiben kann. Ich habe immer den Vorschlag angenommen, dass === streng boolesch ist. Gut zu wissen.

— Kai Qing

3

@Kai: Es gibt kein Problem mit der Verwendung ===anstatt ==hier, aber es gibt auch keinen Vorteil. Es ist garantiert, dass beide Operanden Zeichenfolgen sind, sodass beide Operatoren genau dieselben Schritte ausführen.

— Tim Down

1

@hippietrail Und fast 10 Jahre später (27.10.2019) gibt es immer noch Probleme. Überprüfen Sie, was MDN meldet

— Felipe Alameda A

36

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
}

— Kai Qing
quelle

8

Vermeiden Sie es, die Antwort zu komplizieren. Ich weiß, dass jQuery zu einem Standard wird, aber es gibt keinen Grund, ein ganzes Framework hinzuzufügen, nur um den Anzeigestil eines Elements zu überprüfen.

— zzzzBov

14

Ja, aber ich habe dies getan, weil alle anderen die rohe Javascript-Antwort gaben. Wenn er also jquery verwendete, aber nicht spezifizierte, würde es in der Post eine Verwendung geben

— Kai Qing

18

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'.

— Martin Jiřička
quelle

Dies ist in der Tat nützlich.

— Jonatas Walker

7

Ja.

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

— Sieger
quelle

5

Grundlegendes JavaScript:

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

— Chugworth
quelle

2

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

— MarkXA
quelle

0

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

— Joyce Babu
quelle

-1

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

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

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

— Marek Tuchalski
quelle