Question

我正在尝试使用jQuery获取元素的CSS（顶部和左侧）：

$(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>

Answer 1

我自己也遇到过这种情况，并认为它很奇怪。

而不是：

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

我刚刚做了：

 element.style.top

没有jQuery并且为你提供了你所做类型的实际价值（百分比，ems等）

Answer 2

你可以这样做：

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

关于您的先例评论，如果您想使用css（'top'），请不要忘记解析它。

Answer 3

这也是一个选择：

$(element)[0].style.top

Answer 4

有一种（非常简单的）方法可以做到这一点！即使使用样式表 关键是通过暂时隐藏父级来阻止jquery计算值。

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

瞧！

如果您只想使用不带“％”的数字

top = parseFloat(top);

顺便说一句：不用担心，隐藏和重新显示的速度非常快，对用户来说是不可见的。

Answer 5

由您自己计算：

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

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

Answer 7

您可以尝试一下。您可以更改“ element”和“ parent”以与您的项目兼容。

var parent_height = $(element).parent().height(); // Height of parent. If you do something related to "width", get parent's width.

var top_val_px   = $(element).css('top');
var top_val_only = top_val_px.slice(0,-2); // Remove "px" part
var top_Percentage = (top_val_only/parent_height) * 100; // Percentage will be a close value.

我使用了类似的代码，并且有效。

使用jQuery获得CSS位置百分比

7 个答案: