prise en % CSS position avec jQuery

Je vais essayer d'obtenir un élément CSS (en haut et à gauche) avec jQuery:

$(element).css('top');

mais au lieu de "12%" comme il se doit, j'ai l'pixels.
Comment puis-je obtenir le pourcentage?

HTML:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<style type="text/css">
.parWrapper {
    position:absolute;
    top: 40%
}
</style>
</head>
<body>
<div> 
    <div id="crap" class="parWrapper" style="left:50%">
    Wrap1   
    </div>

    <div class="parWrapper">
    Wrap2
    </div>

    <div class="parWrapper">
    Wrap3   
    </div>

    <div class="parWrapper">
    Wrap4   
    </div>

    <div class="parWrapper">
    Wrap5   
    </div>

</div>

</body>

Pouvez-vous afficher votre code html et css de l'élément? Dans l'exemple suivant, je suis l' % jsfiddle.net/Nalum/yMTVv bien que je ne l'ai testé ce dans Google Chrome. Quel navigateur utilisez-vous?

OriginalL'auteur ran levi | 2011-03-08

css jquery

14

Vous pouvez faire ceci:
```
$(element).position().top / $(element).parent().height() * 100
```
Concernant votre précédent commentaire, si vous voulez travailler avec les css('top'), n'oubliez pas de parseInt.

comme je l'ai mentionné avant, la hauteur de parent renvoie 0
pourriez-vous nous fournir le code HTML que vous travaillez ?
la taille de ses parents devient 0 si vous utilisez un flotteur ou une position:[absolue|fixed].
-1: l'Obtention de la valeur réelle au lieu de calculer, il serait mieux en pratique. - element.style.top
oh 3 ans passé ma réponse, toujours avoir des commentaires :D. en Fait OP demandé un moyen d'obtenir un pourcentage avec jQuery. J'ai répondu en disant à la calculer (de sorte que vous êtes sûr à 100% pour obtenir un pourcentage). Mais je suis d'accord que si vous avez besoin d'obtenir directement la valeur dans les styles de element.style.top est une meilleure façon 😉

OriginalL'auteur Thomas Menga
13

Je viens de rencontré moi-même, et il lui semble bizarre, trop.

Au lieu de:
```
 $(element).css('top');
```
J'ai juste fait:
```
 element.style.top
```
Pas de jQuery et vous donne la valeur réelle dans le type que vous avez fait (pour cent, ems, etc.)

C'est certainement plus utile que de prendre de la hauteur de la mère, puis de la rétro-ingénierie de calculer le pourcentage.

OriginalL'auteur Mauvis Ledford
10

C'est aussi une option:
```
$(element)[0].style.top
```
OriginalL'auteur Joel Box
3

Il y a un (très facile) de façon à ce faire!

Même lors de l'utilisation de feuilles de style.

La clé est d'éviter jquery à partir du calcul de la valeur à masquer temporairement le parent.
```
$(element).parent().hide();
var top = $(element).css("top");
$(element).parent().show();
console.log(top);
```
voila!

Si vous voulez juste le numéro sans le "%" utilisation
```
top = parseFloat(top);
```
BTW: Ne vous inquiétez pas, le masquage et reshowing est si rapide, il ne sera pas visible pour vos utilisateurs.

OriginalL'auteur Jan Paepke
1

calculer par votre propre:
```
($(element).css('top') / parentHeight) * 100;
```
pas de travail, ($(element).css('top').substr(0,$(theobj).css('top').longueur-2) / $(element).parent().height()) * 100; donne-moi NaN (hauteur de parent est de 0)
qu'en est parseInt($(element).css('top'))

OriginalL'auteur Maxim Manco

J'ai eu un besoin de calculer quelque chose de similaire, mais dans mon cas c'était le gauche %, vous pouvez mettre à jour le code ci-dessous pour utiliser la hauteur de la fenêtre si vous allez pour une verticale pourcentage de la valeur -

getLeftPercent = function() {
    var leftStr = $('#my-obj').css('left'),
        pxPos = leftStr.indexOf('px'),
        leftVal = leftStr.substr(0, pxPos),
        leftPercent = (leftVal / $(window).width() * 100).toString(),
        dotPos = leftPercent.indexOf('.'),
        leftPercentStr = dotPos == -1 ? leftPercent + '%' : leftPercent.substr(0, dotPos) + '%';
    return leftPercentStr;
};

OriginalL'auteur cchamberlain

Vous devez vous connecter pour publier un commentaire.