Получение процента позиции CSS с помощью jQuery

Я пытаюсь получить элемент CSS (вверху и слева) с помощью jQuery:

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

но вместо "12%", как и должно быть, я получаю пиксели.
Как получить процент?

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>

Ответы

Ответ 1

Я просто столкнулся с этим сам и подумал, что это тоже странно.

Вместо:

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

Я только что сделал:

 element.style.top

Нет jQuery и дает фактическое значение в том типе, который вы сделали (проценты, ems и т.д.)

Ответ 2

Вы можете сделать это:

$(element).position().top / $(element).parent().height() * 100

Относительно вашего комментария к прецеденту, если вы хотите работать с css ('top'), не забывайте parseInt его.

Ответ 3

Это также вариант:

$(element)[0].style.top

Ответ 4

Существует (очень простой) способ сделать это!
Даже при использовании таблиц стилей.
Ключ должен предотвратить jquery от вычисления значения, временно скрывая родителя.

$(element).parent().hide();
var top = $(element).css("top");
$(element).parent().show();
console.log(top);

вуаля!

Если вы хотите использовать только номер без "%", используйте

top = parseFloat(top);

BTW: не волнуйтесь, скрытие и пересмотр настолько быстр, он не будет отображаться для ваших пользователей.

Ответ 5

вычислить его самостоятельно:

($(element).css('top') / parentHeight) * 100;

Ответ 6

Мне нужно было вычислить что-то похожее, но в моем случае это был левый%, вы можете обновить код ниже, чтобы использовать высоту окна, если вы собираетесь на вертикальное процентное значение -

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;
};