Source : check if a element is display:none or block on click. Jquery
On peut utiliser les pseudo-classes CSS :visible pour les éléments visibles et :hidden pour trouver les éléments invisibles.
|
1 2 |
hiddenElements = $(':hidden'); visibleElements = $(':visible'); |
Pour vérifier la présence d’un élément en particulier :
|
1 |
if($('#yourID:visible').length == 0){} |
Note pour moi-même : je ne sais pas pourquoi j’avais posté un exemple avec la pseudo-classe :visible et la méthode .length == 0… Vérifier la présence dans le DOM d’un élément possédant une certaine classe (puis agir dessus) fonctionne mieux sans la pseudo-classe et en affectant la valeur de 1 à length :
|
1 2 3 |
if(jQuery('.link-sommaire-left').length == 1){ jQuery('.mobile-conseil-bottom-nav .prev-chapter').attr({"href": "#", "disabled": "disabled"}); } |
Les éléments sont considérés comme visibles si ils prennent de la place dans le document. Les éléments visibles ont une largeur et/ou une hauteur dont la valeur est plus grande que zéro (source).
On peut également utiliser is() avec :visible :
|
1 |
if(!$('#yourID').is(':visible')){} |
Si on souhaite vérifier la valeur de la propriété display, on peut utiliser attr() :
|
1 |
if($('#yourID').css('display') == 'none'){} |
Si la propriété CSS display est employée, elle peut avoir les valeurs suivantes :
- display: none
- display: inline
- display: block
- display: list-item
- display: inline-block
