jQuery - trouver la largeur d'un élément tel que spécifié dans le CSS (par exemple, en %âge si elle a été spécifiée en %âge, et pas seulement en px)
Similaire à cette question:
obtenir règle CSS pourcentage de la valeur en jQuery
Cependant, je suis en train d'écrire un plugin, et il a besoin de traiter avec elle gracieusement dépend de la façon dont la largeur a été spécifié à l'origine. Si l'élément a été à l'origine spécifiée en pixels c'est bien que c'est la valeur que .width()
, .innerWidth()
, outerWidth()
et .css('width')
retour.
Mais je veux savoir si elle était d'origine définie comme un pourcentage. De sorte que si l'élément conteneur redimensionne alors je sais de recalculer la largeur que j'ai mis sur mon élément.
Est-ce possible? La seule chose que je peux penser est d'essayer de faire une boucle par le document.les feuilles de style à la recherche pour les règles, mais je pense que ce sera plus ou moins impossible de le faire d'une manière générique. D'autres idées?
Merci!
.css('width')
ne retourne pas la propriété comme une chaîne de caractères? Sinon, comment voulez-vous obtenir le auto
valeur?Il ne semble pas à partir de mes expériences (et de la réponse ci-dessous, il semble que cela pourrait être le navigateur depandant). Merci pour la réponse tho 🙂
OriginalL'auteur vitch | 2010-08-21
Vous devez vous connecter pour publier un commentaire.
Il semble que
.css('width')
fonctionne pour moi.Petit exemple pour montrer cela fonctionne:
Cela me donne une sortie de "10%". Espère que je n'ai pas manqué de rien d'évident.
Soins à élaborer? Je suis peut-être un malentendu lui
Si je lis correctement, il est à la recherche pour le initialement spécifié, pas l'efficacité de la largeur en pixels.
Il dépend du navigateur. Sur IE jQuery utilise
currentStyle
qui vous donne la largeur spécifiée. Sur les autres navigateurs, on utilise desgetComputedStyle
qui vous donne le résultat de son style, qui est résolu à partir de%
àpx
.En fait, j'ai juste regardé et cet exemple en particulier, au travail, parce que jQuery renvoie également la valeur spécifiée si elle est définie sur un style en ligne (
style="width: 10%"
). Cela ne fonctionne pas pour la feuille de style les styles. Ce genre de chose est assez typique de jQuery Faire Ce que je veux Dire approche, en essayant de masquer les fondamentaux du navigateur et les différences d'ordre conceptuel (voir aussi l'horreur qui estattr()
). C'est inévitablement une abstraction qui fuit, faire des erreurs d'autant plus à confusion.OriginalL'auteur data
Je ne pouvais pas trouver un moyen de faire ce que j'ai demandé dans la question mais j'ai trouvé une solution qui me permet de faire ce dont j'ai besoin dans ma situation. Le code en question est pour mon plugin jQuery appelé jScrollPane ( http://jscrollpane.kelvinluck.com/ ). En fin de compte ce que j'ai à faire est de définir la largeur de null (
elem.css('width', null);
). Cela supprime la largeur j'avais mis moi-même précédemment et permet à l'élément à prendre, il est naturel largeur telle que définie dans la feuille de style (c'est à dire en utilisant un pourcentage si c'est comment il a été défini). Je peux ensuite les mesures de cette nouvelle valeur et l'utiliser pour définir la largeur jusqu'à le nombre que j'ai envie...OriginalL'auteur vitch