Vérifier l'affichage CSS de l'élément avec JavaScript

Question

Est-il possible de vérifier si le CSS d'un élément display == block ou none utilisant JavaScript ?

Answer 1

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

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

Sinon, vous devrez obtenir le style calculé, et il y a des incohérences de navigateur. IE utilise un objet currentStyle 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.

Answer 2

Pour jQuery, tu veux dire comme ça ?

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

Vous pouvez le vérifier comme ceci :

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

Answer 3

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-il être préférable à la vérification directe de la propriété display 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 ont toujours element.style.display !== 'none' .

Answer 4

Oui.

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