jQuery .css返回的是以像素为单位的CSS属性，实际上应该是百分比。

Question

我正在尝试使用jQuery的.css方法获取left属性的值（该值为百分比）:

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

问题是，以上返回了它的像素值...

你有什么办法可以让它返回属性的实际值（即百分比）吗？

- user849137

---

可能是在jQuery中获取CSS规则百分比值的重复问题。 - Felix Kling

left 是通过内联方式应用的，还是通过样式表应用的？ - T.J. Crowder

@T.J.Crowder 我不太清楚您所说的内联或样式表是什么意思。但是，我试图获取的规则是由JavaScript应用的。当页面加载时，会进行AJAX调用，进行一些计算（用于百分比），并将CSS样式应用于文档（简单地插入到头部部分），以供元素使用。 - user849137

@nav_nav：内联样式是通过元素标记上的“style”属性应用的，例如<div style="left: 20%">。当由样式表应用时，它是在style元素或通过link rel="stylesheet"元素链接的CSS文件中的CSS。根据您的评论，听起来它是由样式表应用的。如果是这样，那么恐怕您唯一的选择就是通过样式信息进行工作（有关详细信息，请参见我的答案）。 - T.J. Crowder

啊，是的，我明白了。所以看起来我应该只使用像素吗？ - user849137

@nav_nav：那样做是最简单的。正如我所说，从样式表中获取信息是可能的，但很困难。 - T.J. Crowder

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规则的特异性等并不容易，但对于简单情况来说，这并不是特别困难。

---

至于内联样式，这里有一个实时演示 - 在演示中，我有一个绝对定位的 div，其 left 属性由内联样式定义，top 属性由样式表定义（因此不是内联）。

使用Chrome 16：

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

使用Firefox 10：

css('left') 返回: 193.2px
style.left 返回: 20%
css('top') 返回: 73.5px
style.top 返回:

使用IE9：

css('left') 返回: 239.8px
style.left 返回: 20%
css('top') 返回: 59.3px
style.top 返回: 

style.top 始终为空的原因是 style 只反映内联样式，但我为了完整性而包括它。

- T.J. Crowder

---

很奇怪，style.left 对我来说返回的是空的。 - user849137

@nav_nav：使用哪个浏览器？left 是通过内联样式还是样式表应用的？这很重要（style.left 仅对 内联 样式适用）。 - T.J. Crowder

Answer 2

我刚遇到了这个问题，并通过以下方式解决：

$('#mySelector').get(0).style.width;

返回了'100%'

然而，$('#mySelector').css('width');返回了'900px'

希望这个能够帮到有需要的人

- bruchowski

Answer 3

更新：在IE 11中，style.left已不再起作用。如果您正在尝试访问内联样式，请使用prop()函数，然后将要查找的特定属性指定为数组键：

$("selector").prop("style")["left"];

将以像素为单位返回属性

- Ken Sanders

---

会返回你什么？ - pquest

Answer 4

我认为不可能直接获取元素宽度的百分比值，因为浏览器会在内部进行计算，然后只允许访问结果像素值。

但是，一旦你知道了元素的宽度和相关包含元素的宽度，你可以通过以下方式计算出百分比：

var elWidth = $('#myElement').width();
var containerWidth = $('#myContainer').offsetParent().width();
var elWidthPercent = 100 * elWidth / containerWidth;

- Rory McCrossan