Firefox, requête du sélecteur et de la pseudo-sélecteur

Est-il de toute façon à utiliser un pseudo sélecteur de Firefox querySelector() ou querySelectorAll() fonctions permettant de détecter la visibilité? En particulier, je veux être en mesure de faire quelque chose comme ceci:

elem.querySelector('#list .list-item:visible');
elem.querySelector('#section .sub-section:visible .title');

Pas besoin de s'inquiéter à propos de navigateur incohérences ou autres de la mise en œuvre, à seulement Firefox. Merci!

EDIT: Visible est définie par affichage pas être aucun et visibilité pas être caché.

Quelle est votre définition de "visibilité"?
L'élément DOM l'affichage de bloc de travail, mais, idéalement, il serait également vérifier que la visibilité est visible.

InformationsquelleAutor macguru2000 | 2012-11-14

7

Non, il n'y en a pas. La spécification CSS ne définit pas une :visible (ou connexes) sélecteur, et autant que je sache, Firefox ne pas mettre en œuvre non standard pseudo-sélecteurs.

Si vous souhaitez mettre en œuvre vous-même, notez comment jQuery met en œuvre ses :visible sélecteur:

En jQuery 1.3.1 (et plus) d'un élément est visible que si son CSS "display" n'était pas "rien", son CSS "visibilité" n'était pas "caché", et son type (si c'était une entrée) n'a pas été "caché".
En jQuery 1.3.2 un élément est visible que si son navigateur déclarés offsetWidth ou offsetHeight est supérieure à 0.

Source: http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled
- C'est ce que je craignais...mauvais. Je comprends qu'il n'est pas utile de pseudo-sélecteur CSS, mais il serait vraiment utile en Javascript.
- le jQuery de mise en œuvre ne fonctionne pas vraiment bien à tous pour la détection de la css propriété de visibilité que visibility: hidden va prendre de l'espace sur le document
- Et sur niveau philosophique peut-être que c'est la bonne mise en œuvre...dépend de ce que vous considérez visible...si c'est en prenant de l'espace sur la page, alors il y a de la place pour faire valoir que l'élément est "visible".
InformationsquelleAutor David Wolever
16

Puisqu'il n'est pas natif implémentation de l' :visible pseudo-sélecteur j'ai décidé d'utiliser des classes CSS pour masquer et afficher mes éléments, permettant ainsi à tout simplement vérifier le nom de la classe au lieu de visibilité. Voici ce que mon sélecteur ressemble à ça:
```
elem.querySelector('#list .list-item:not(.hidden)');
```
Maintenant, en 2016, on peut aussi utiliser le caché attribut html5, donc ce sélecteur serait trop de travail:
```
elem.querySelector('#list .list-item:not([hidden])');
```
- est-ce toujours la meilleure façon en 2015?
- Je crois donc :visible, n'est pas et ne sera probablement jamais partie de la spécification css.
- D'une façon plus populaire pour ce faire, en 2016, est d'utiliser le nouveau caché html5 attribut global. Il n'est pas entièrement compatible, donc soyez prudent. Ici est Mozilla docs developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/...
- thx,est-il prêter attention à l'opacité css paramètres?
- l'attribut caché définit les éléments d'affichage à aucun. Donc non, il ne tient pas compte de l'opacité.
InformationsquelleAutor macguru2000
4

À l'aide de la plaine de javascript, vous pouvez également émuler jQuery facilement des comportements, en transformant votre querySelector résultats dans un tableau, et le filtrage:
```
Array.prototype.slice.call(document.querySelectorAll('your selector'))
```
Qui crée un simple tableau avec les résultats de votre sélection, que vous pouvez filtrer comme:
```
.filter(function (item,index) { return item.style.display!="none" } );
```
ou même le reste de jquery conditions (item.style.visibility != "hidden" && item.style.opacity > 0 && ...).

Comme un liner:
```
Array.prototype.slice.call(document.querySelectorAll('your selector')).filter(function (item,index) { return item.style.display!="none" } );
```
InformationsquelleAutor Javier Guerrero
4

Pour trouver des éléments qui ne sont pas display:none le sélecteur CSS équivalent à :visible est
```
:not([style='display:none'])
```
Vous pourriez faire la même chose pour visibility:hidden puis de la chaîne d' :not() sélecteurs si vous en avez besoin.

Voici un violon.

Edit: Être prudent avec les espaces et autres signes de ponctuation. Si plus tard vous manipuler ces éléments avec JQuery et hide(), par exemple, et la nécessité d'appeler la même fonction, alors vous aurez besoin de la chaîne d' :not([style="display: none;"]) à votre sélecteur CSS.

InformationsquelleAutor iandllnghm
0

Vérifier si l'élément est visible, prend en charge sur tous les principaux navigateurs:

jQuery:
```
$('.list-item').is(':visible');
```
Vanille JS:
```
function isVisible(elem) {return elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem.getClientRects().length > 0; }
```
- Êtes-vous sûr que ces deux exemples suivants sont équivalents dans toutes les versions de jQuery?
- Ils sont l'équivalent dans la dernière version de jQuery, je n'ai pas vérifier (et donc jamais mentionné) les versions antérieures de jQuery au sujet de cette méthode.
- Je vois, merci de ne pas mal le prendre, mais quand vous avez fait cela pendant plus d'une décennie, vous arrêter de croire une mention signifie la "dernière version". Pensez à ce que quelqu'un d'autre lecture de votre réponse, en 2 ans, le temps pourrait penser, jQuery3?
- A noté, merci.
InformationsquelleAutor Tomer Gal

Vous devez vous connecter pour publier un commentaire.