使用jQuery获得CSS位置百分比

ran*_*evi 12 css jquery

我正在尝试使用jQuery获取元素的CSS(顶部和左侧):

$(element).css('top');
Run Code Online (Sandbox Code Playgroud)

但不是像它应该的"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>
Run Code Online (Sandbox Code Playgroud)

Mau*_*ord 15

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

代替:

 $(element).css('top');
Run Code Online (Sandbox Code Playgroud)

我已经做了:

 element.style.top
Run Code Online (Sandbox Code Playgroud)

没有jQuery,并为您提供了它所用类型的实际值(百分比,ems等)


Tho*_*nga 14

你可以这样做:

$(element).position().top / $(element).parent().height() * 100
Run Code Online (Sandbox Code Playgroud)

关于你的先例评论,如果你想使用css('top'),不要忘记解析它.


Joe*_*Box 10

这也是一个选择:

$(element)[0].style.top
Run Code Online (Sandbox Code Playgroud)


Max*_*nco 1

自己计算一下:

($(element).css('top') / parentHeight) * 100;
Run Code Online (Sandbox Code Playgroud)