Vérifier l'affichage CSS des éléments avec JavaScript

95

Est-il possible de vérifier si le CSS d'un élément display == blockou en noneutilisant JavaScript?

javascript css

— Seth
source

111

Comme sdleihssirhc le dit ci-dessous, si l'élément displayest hérité ou spécifié par une règle CSS, vous devrez obtenir son style calculé :

return getComputedStyle(element, null).display;

Les éléments ont une stylepropriété qui vous dira ce que vous voulez, si le style a été déclaré en ligne ou avec JavaScript:

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

vous donnera une valeur de chaîne.

— Dan Davies Brackett
source

2

Et s'il n'a pas de CSS en ligne?

— jscripter

5

Pour plus de simplicité, pourquoi ne pas toujours obtenir le style calculé?

— cade galt

12

qu'est ce que c'est currentStyle? document.body.currentStyleje n'en ai jamais entendu parler, a également vérifié et n'a rien obtenu (n'était pas surpris)

— vsync

1

@vsync (et pour référence future) Selon MDN , c'est une propriété propriétaire de l'ancienne version d'Internet Explorer.

— user202729

2

Merci pour les commentaires. Réponse mise à jour pour le web moderne.

— Dan Davies Brackett

78

Si le style a été déclaré en ligne ou avec JavaScript, vous pouvez simplement accéder à l' styleobjet:

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

Sinon, vous devrez obtenir le style calculé et il y a des incohérences dans le navigateur. IE utilise un currentStyleobjet simple , mais tout le monde utilise une méthode:

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

Le nullétait requis dans Firefox version 3 et inférieure.

— sdleihssirhc
source

cela ne devrait-il pas être == dans ce cas?

— Kai Qing le

@Kai Le triple égal ne fait pas de coercition de type. Crockford explique pourquoi , dans la section intitulée « ===et les !==opérateurs».

— sdleihssirhc

C'est assez intéressant. C'est drôle comment quelque chose comme ça peut simplement échapper à l'attention après tant d'années de programmation. J'ai toujours adopté la suggestion que === était strictement booléen. Bon à savoir.

— Kai Qing le

3

@Kai: Il n'y a pas de problème à utiliser ===plutôt ==qu'ici, mais il n'y a pas non plus d'avantage. Il est garanti que les deux opérandes sont des chaînes, de sorte que les deux opérateurs effectuent exactement les mêmes étapes.

— Tim Down

1

@hippietrail Et près de 10 ans plus tard (2019-10-27), il y a encore des problèmes. Vérifiez ce que rapporte MDN

— Felipe Alameda A

37

Pour jQuery, voulez-vous dire comme ça?

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

Vous pouvez le vérifier comme ceci:

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

— Kai Qing
source

9

Évitez de trop compliquer la réponse. Je sais que jQuery devient en quelque sorte un standard, mais il n'y a aucune raison d'ajouter un framework entier juste pour vérifier le style d'affichage d'un élément.

— zzzzBov

14

Ouais, mais je l'ai fait parce que tout le monde a donné la réponse javascript brute, donc s'il utilisait jquery mais ne le précisait pas, il y aurait une certaine utilité dans le post

— Kai Qing

18

Cette réponse n'est pas exactement ce que vous voulez, mais elle peut être utile dans certains cas. Si vous savez que l'élément a des dimensions lorsqu'il est affiché, vous pouvez également utiliser ceci:

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

EDIT: Pourquoi cela pourrait être mieux que la vérification directe de la displaypropriété CSS ? Parce que vous n'avez pas besoin de vérifier tous les éléments parents. Si un élément parent a display: none, ses enfants sont également masqués mais l'ont toujours element.style.display !== 'none'.

— Martin Jiřička
source

En effet, cela est utile.

— Jonatas Walker

7

Oui.

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

— Victor
source

5

JavaScript de base:

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

— Chugworth
source

2

Pour savoir s'il est visible avec du JavaScript brut, vérifiez si la propriété d'affichage est `` aucun '' (ne vérifiez pas `` bloc '', il peut également être vide ou `` en ligne '' et toujours visible):

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

Si vous utilisez jQuery, vous pouvez utiliser ceci à la place:

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

— MarkXA
source

0

Avec du javascript pur, vous pouvez vérifier la style.displaypropriété. Avec jQuery, vous pouvez utiliser$('#id').css('display')

— Joyce Babu
source

-1

Vous pouvez le vérifier avec par exemple jQuery:

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

Il retournera une chaîne avec des informations sur la propriété d'affichage de cet élément.

— Marek Tuchalski
source