javascript - jQuery .css 以像素为单位返回 css 属性，而实际上以百分比为单位

Question

我正在尝试使用 jQuery 中的 .css 方法获取 left 属性的值(以百分比表示):

var my_value= $("div").css("left");

问题是，上面以像素为单位返回它...

关于如何让它返回属性的实际值(以百分比表示)的任何想法？

Answer 1

如果你在内联应用 left，你可以直接从 style.left 访问它，例如:

var my_value = $("div")[0].style.left;

对我来说，在 Firefox、IE 和 Opera 上，它返回百分比值，而 css 返回像素数。 (在 Chrome 上，我可以通过任何一种方式获得百分比。)

如果您通过样式表应用 left，我认为没有任何方便的方法来获取您正在寻找的信息。您可以得到它，但这确实很不方便:通过查看所有已定义的样式规则，确定哪些适用于元素，然后解析规则文本。您可以通过 document.styleSheets 访问样式表，它是文档所有样式表的数组。每个样式表都有一组规则，它定义为 cssRules 或 rules(取决于浏览器)。每个规则都有一个 cssText 属性，为您提供规则的文本。

$.each(document.styleSheets, function(sheetIndex, sheet) {
    $.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
        var ruleText = rule.cssText;

        // Figure out if the rule applies, and parse out the value
    });
});

获得所有 CSS 规则的特殊性和正确性并不容易，但有可能，而且对于更简单的情况也不是特别困难。

---

对于内联样式，here's a live demo - 在演示中，我有一个绝对定位的 div，其中 left 由 inline 样式定义，top 定义通过样式表(因此不是内联)。

使用 Chrome 16:

css('left') says: 20%style.left says: 20%css('top') says: 10%style.top says:

使用 Firefox 10:

css('left') says: 193.2pxstyle.left says: 20%css('top') says: 73.5pxstyle.top says:

使用 IE9:

css('left') says: 239.8pxstyle.left says: 20%css('top') says: 59.3pxstyle.top says: 

style.top 始终为空白的原因是 style 仅反射(reflect)内联 样式，但为了完整起见，我将其包括在内。