使用jQuery获取CSS百分比定位

Question

使用jQuery获取CSS百分比定位

13

我正在尝试使用jQuery获取一个元素的CSS(top和left)：

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

- ran levi

你能展示一下该元素的HTML和CSS吗？在以下示例中，我得到了% http://jsfiddle.net/Nalum/yMTVv/，尽管我只在Google Chrome中进行了测试。你用的是什么浏览器？ - Nalum

7个回答

15

你可以这样做：

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

关于您之前的评论，如果您想使用css('top')，请记得对其进行parseInt()处理。

- Thomas Menga

正如我之前提到的，父元素的高度返回为0。 - ran levi

如果您在父元素上使用浮动或position:[absolute|fixed]属性，其高度将变为0。 - cr0

-1：获取实际值而不是计算它将是更好的实践。- element.style.top - David Bradbury

哦，三年过去了，我的回答仍然收到评论 :D。实际上，OP问如何使用jQuery获取百分比。我回答说要计算它（这样你就可以100％确定获取百分比）。但是我同意，如果您需要直接从样式中获取值，则element.style.top是更好的方法;)。 - Thomas Menga

10

这也是一个选项：

$(element)[0].style.top

- Joel Box

1

自己来计算：

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

- Maxim Manco

1

ж— жі•е·ҘдҪңпјҢ($(element).css('top').substr(0,$(theobj).css('top').length-2) / $(element).parent().height()) * 100; з»ҷжҲ‘ NaNпјҲзҲ¶е…ғзҙ зҡ„й«ҳеәҰдёә0пјү - ran levi

parseInt（$（element）.css（'top'））是什么意思？ - Maxim Manco

1

我有一个类似的计算需求，但我的情况是左侧百分比，如果你想要垂直百分比值，可以更新下面的代码以使用窗口高度 -

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

- cchamberlain

1

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

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

看这里！

如果你只想要数字而不带有“%”符号，请使用以下方法

top = parseFloat(top);

顺便说一下：不用担心，隐藏和重新显示的速度非常快，对您的用户来说看不到。

- Jan Paepke

0

你可以试试这个。您可以更改“元素”和“父级”以使其与您的项目兼容。

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.

我使用了类似的代码，它起作用了。

- AnushkaM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mauvis Ledford · Accepted Answer

我刚遇到了这个问题，我也觉得很奇怪。

而不是：

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

我刚刚做了：

 element.style.top

不使用jQuery，直接返回你所设置的类型的实际值（百分比、ems等）。