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

Question 1

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

Question 2

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.

Question 3

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.

Question 4

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
}

Question 5

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'.

Question 6

Oui.

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

Question 7

JavaScript de base:

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

Question 8

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");

Question 9

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

Question 10

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.

Answer 1

95

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

javascript css Seth
la source

Answer 2

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
la 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

Answer 3

2

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

jscripter

Answer 4

5

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

cade galt

Answer 5

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

Answer 6

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

Answer 7

2

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

Dan Davies Brackett

Answer 8

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
la 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

Answer 9

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

Kai Qing le

Answer 10

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

sdleihssirhc

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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
la 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

Answer 15

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

Answer 16

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

Answer 17

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'.

Answer 18

En effet, cela est utile.

Jonatas Walker

Answer 19

7

Oui.

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

Victor
la source

Answer 20

5

JavaScript de base:

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

Chugworth
la source

Answer 21

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");

Answer 22

0

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

Joyce Babu
la source

Answer 23

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.

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

Réponses: