Sprawdź wyświetlanie elementu CSS za pomocą JavaScript

97

Czy można sprawdzić, czy element jest CSS display == blocklub noneużywając JavaScript?

javascript css

— Seth
źródło

114

Jak mówi sdleihssirhc poniżej, jeśli element displayjest dziedziczony lub określany przez regułę CSS, musisz uzyskać jego obliczony styl :

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

Elementy mają stylewłaściwość, która powie Ci, czego chcesz, czy styl został zadeklarowany w tekście, czy w JavaScript:

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

poda wartość ciągu.

— Dan Davies Brackett
źródło

2

A jeśli nie ma wbudowanego css?

— jscripter

5

Dla uproszczenia, dlaczego nie zawsze uzyskać styl obliczeniowy?

— cade galt

12

co jest currentStyle? nigdy o tym nie słyszałem, też sprawdziłem document.body.currentStylei nic nie dostałem (nie było zdziwione)

— vsync

1

@vsync (i do wykorzystania w przyszłości) Według MDN jest to zastrzeżona własność starej wersji przeglądarki Internet Explorer.

— user202729

2

Dzięki za komentarze. Odpowiedź zaktualizowana dla współczesnej sieci.

— Dan Davies Brackett

78

Jeśli styl został zadeklarowany w tekście lub w JavaScript, możesz po prostu dostać się do styleobiektu:

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

W przeciwnym razie będziesz musiał pobrać obliczony styl i występują niespójności przeglądarki. IE używa prostego currentStyleobiektu, ale wszyscy inni używają metody:

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

nullByło wymagane w Firefox w wersji 3 i poniżej.

— sdleihssirhc
źródło

czy to nie powinno być == w tym przypadku?

— Kai Qing

@Kai Potrójna równość nie powoduje wymuszania wpisywania. Crockford wyjaśnia dlaczego w sekcji „ ===i !==operatorzy”.

— sdleihssirhc

To całkiem interesujące. Zabawne, jak coś takiego może po prostu umknąć uwadze po tylu latach programowania. Zawsze przyjmowałem sugestię, że === jest ściśle logiczną wartością. Dobrze wiedzieć.

— Kai Qing

3

@Kai: Nie ma problemu z używaniem, ===a nie ==tutaj, ale równie nie ma też żadnej korzyści. Oba operandy są łańcuchami, więc oba operatory wykonują dokładnie te same kroki.

— Tim Down

1

@hippietrail I prawie 10 lat później (27.10.2019) nadal występują problemy. Sprawdź, co donosi MDN

— Felipe Alameda

37

W przypadku jQuery masz na myśli to?

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

Możesz to sprawdzić tak:

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

— Kai Qing
źródło

9

Unikaj nadmiernego komplikowania odpowiedzi. Wiem, że jQuery staje się w pewnym sensie standardem, ale nie ma powodu, aby dodawać cały framework tylko po to, aby sprawdzić styl wyświetlania elementu.

— zzzzBov

14

Tak, ale zrobiłem to, ponieważ wszyscy inni podali surową odpowiedź javascript, więc jeśli używał jquery, ale nie określił tego, to byłby użyteczny w poście

— Kai Qing

18

Ta odpowiedź nie jest dokładnie tym, czego chcesz, ale w niektórych przypadkach może być przydatna. Jeśli wiesz, że element ma pewne wymiary po wyświetleniu, możesz również użyć tego:

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

EDYCJA: Dlaczego to może być lepsze niż bezpośrednie sprawdzenie displaywłaściwości CSS ? Ponieważ nie musisz sprawdzać wszystkich elementów nadrzędnych. Jeśli jakiś element nadrzędny ma display: none, jego dzieci również są ukryte, ale nadal tak element.style.display !== 'none'.

— Martin Jiřička
źródło

Rzeczywiście, jest to przydatne.

— Jonatas Walker

7

tak.

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

— Zwycięzca
źródło

5

Podstawowy JavaScript:

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

— Chugworth
źródło

2

Aby dowiedzieć się, czy jest widoczny w zwykłym JavaScript, sprawdź, czy właściwość display ma wartość „none” (nie sprawdzaj „block”, może być również pusta lub „inline” i nadal widoczna):

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

Jeśli używasz jQuery, możesz użyć tego zamiast tego:

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

— MarkXA
źródło

0

Czysty javascript możesz sprawdzić style.displaywłaściwość. Dzięki jQuery możesz używać$('#id').css('display')

— Joyce Babu
źródło

-1

Możesz to sprawdzić na przykład przy pomocy jQuery:

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

Zwróci łańcuch z informacją o właściwości display tego elementu.

— Marek Tuchalski
źródło