Trouver le “potentiel” de la largeur d'un élément masqué
Je suis actuellement à l'extension de la lavalamp plugin de travailler sur les menus déroulants, mais j'ai rencontré un petit problème. J'ai besoin de savoir le offsetWidth
d'un élément qui est caché. Maintenant, clairement, cette question n'a aucun sens, mais plutôt de ce que je suis à la recherche pour le offsetWidth
de l'élément s'il n'étaient pas cachés.
Est la solution pour l'afficher, saisir la largeur, puis se cacher de nouveau? Il doit y avoir une meilleure façon...
Vous devez vous connecter pour publier un commentaire.
La seule chose que je peux penser à est de montrer (ou un clone) afin de permettre la récupération de la offsetWidth.
Pour cette mesure étape, juste faire de sa position absolue et sa valeur x ou y un gros point négatif, il sera rendu, mais ne pas être visible pour l'utilisateur.
La largeur d'un élément qui a CSS
visibility: hidden
est mesurable. C'est seulement quand il estdisplay: none
qu'il n'est pas rendu à tous. Donc, si il est certain que le sont les éléments à positionnement absolu (afin de ne pas provoquer un changement de présentation lors de l'affichage), il suffit d'utilisercss('visibility', 'hidden')
pour cacher votre élément au lieu dehide()
et vous devriez être OK la mesure de la largeur.Sinon, oui, le show-mesure-masquer fonctionne.
Vous pouvez utiliser la fonction suivante pour obtenir la largeur d'un élément qui est à l'intérieur d'un conteneur caché.
Vous pouvez modifier
.outerWidth()
à.offsetWidth()
pour votre situation.La fonction première des clones de l'élément, de le copier à un endroit où il sera visible. Elle récupère ensuite le décalage largeur et enlève enfin le clone. L'extrait de code suivant illustre une situation où cette fonction serait parfait:
S'il vous plaît être conscient que si il y a CSS appliquée à l'élément qui change la largeur de l'élément qui ne sera pas appliqué si il est un descendant direct du corps, cette méthode ne fonctionnera pas. Donc quelque chose comme ceci signifie que la fonction ne fonctionne pas:
Vous devrez soit:
.measure-me { width: 100px; }
appendTo()
pour ajouter la sélection à un endroit où votre CSS sera également appliquée pour le clone. S'assurer que l'endroit où vous vous faire mettre, que l'élément sera visible:.appendTo('.container-outer')
Encore une fois, cette fonction suppose que l'élément n'est caché parce que c'est à l'intérieur d'un conteneur caché. Si l'élément lui-même est
display:none
, vous pouvez simplement ajouter un peu de code pour faire le clone visible avant de récupérer du décalage de largeur. Quelque chose comme ceci:Ce serait de travailler dans une situation comme celle-ci:
Deux options:
left:-10000px
)visibility: hidden
ouopacity: 0
au lieu dehide()
.Soit la façon de travailler que de cacher l'élément, mais encore être en mesure d'obtenir la largeur calculée. Soyez prudent avec Safari sur le thi, il est drôlement vite et parfois trop vite...
Ce que j'ai fait ;
par le temps de cacher cet élément, stockées sa largeur dans son jeu de données.
Il ne va travailler pour vous si vous pouvez masquer par programmation.
ie.
Quand À Se Cacher ;
Plus tard lors de l'obtention d' ;
Réelle plugin jQuery!
Utilisation:
JS:
HTML:
c'est parce que sa caché via display: none; Ce que j'ai fait dans le passé est de faire un "récepteur" div qui je utiliser le positionnement absolu sur de descendre au bas de la page. Puis-je charger le nouvel élément dans le, prenez les dimensions et le retirer quand im fait - puis retirez le récepteur quand im fait.
Une autre chose que vous pouvez faire est de ne pas utiliser hide(); mais à la place visibility: hidden; affichage: ; Cependant, cela signifie la zone vide sera rendus là où le nœud est associé.
J'essaie de trouver de travail de la fonction pour l'élément masqué, mais je me rends compte que CSS est beaucoup plus complexe que tout le monde pense. Il y a beaucoup de nouvelles techniques de mise en page en CSS3 qui pourraient ne pas fonctionner pour toutes les réponses précédentes tels que la flexibilité de la boîte, la grille, la colonne ou la même élément à l'intérieur du complexe élément parent.
flexibox exemple
Je pense que la seule durable & la solution la plus simple est de rendu en temps réel. À ce moment, le navigateur devrait vous donner que corriger la taille de l'élément.
Malheureusement, JavaScript ne fournit aucun événement à signaler lorsque l'élément est masqué ou affiché. Cependant, j'ai créer une fonction basée sur les DOM Attribut Modifié API qui va exécuter la fonction de rappel lorsque la visibilité de l'élément est modifié.
Pour plus d'informations, Veuillez visiter le site de mon projet GitHub.
https://github.com/Soul-Master/visible.event.js
démo: http://jsbin.com/ETiGIre/7
Si vous connaissez l'élément à la totalité de la largeur d'un élément parent, une autre approche est de créer une méthode récursive:
es5:
es6: