Sjekk elementets CSS-display med JavaScript

Er det mulig å sjekke om et elements CSS display == block eller none ved hjelp av JavaScript?

Svar #1

Som sdleihssirhc sier nedenfor, hvis elementets display blir arvet eller spesifisert av en CSS-regel, må du hente ut dens beregnede stil:

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

Elementer har en style-egenskap som vil fortelle deg hva du vil, hvis stilen ble erklært inline eller med JavaScript:

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

vil gi deg en strengverdi.

Svar #2

Hvis stilen ble deklarert inline eller med JavaScript, kan du bare få tilgang til style-objektet:

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

Ellers må du hente den beregnede stilen, og det er nettleserinkonsistenser. IE bruker et enkelt currentStyle-objekt, men alle andre bruker en metode:

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

Nullen (null) var nødvendig i Firefox versjon 3 og lavere.

Svar #3

For jQuery, mener du slik?

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

Du kan sjekke det slik:

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

Svar #4

Dette svaret er ikke akkurat det du vil ha, men det kan være nyttig i noen tilfeller. Hvis du vet at elementet har noen dimensjoner når det vises, kan du også bruke dette:

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

REDIGER: Hvorfor dette kan være bedre enn direkte sjekk av CSS display-egenskapen? Fordi du ikke trenger å sjekke alle foreldrelementene. Hvis et foreldrelement har display: none, er barna skjult også, men har fortsatt element.style.display !== 'none'.

Relaterte artikler