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规则的特异性和此类权利并不容易，但有可能，对于更简单的情况并不是特别困难。

---

对于内联样式的东西，这里有一个现场演示 - 在演示中，我有一个绝对定位的div，left由内联样式定义，top由样式表定义(所以不是内联(。

使用 Chrome 16

：

css('左'( 说： 20%风格左 说： 20%css('top'( 说： 10%style.top 说：

使用 Firefox 10：

css('左'( 说： 193.2px风格左 说： 20%css('顶部'( 说： 73.5pxstyle.top 说：

使用 IE9：

css('左'( 说： 239.8px风格左 说： 20%css("顶部"( 说： 59.3pxstyle.top 说： 

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

Answer 2

只是遇到了这个问题，并设法以这种方式解决它：

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

还给我'100%'

然而$('#mySelector').css('width');

还了我'900px'

希望这对某人有所帮助

Answer 3

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

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

将以像素为单位返回属性

Answer 4

我认为不可能

以百分比形式返回宽度，因为浏览器在内部进行数学运算，然后只允许访问生成的 px 值。

但是，一旦知道元素的宽度

以及相关包含元素的宽度，您就可以计算出百分比，如下所示：

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