Javascript css返回css属性（以像素为单位），而实际上它是以百分比为单位的

我试图使用jQuery中的

.css

方法获取

left

属性的值（以百分比为单位）：

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

问题是，上面返回的是pixles

---

关于如何让它返回属性的实际值（以百分比表示）？

我认为不可能将宽度以百分比形式返回给您，因为浏览器在内部进行计算，然后只允许访问结果px值

但是，一旦知道元素的宽度以及相关包含元素的宽度，就可以计算出百分比，如下所示：

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

---

如果您正在内联应用

left

，则可以直接从

style.left

访问它，例如：

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

对我来说，在Firefox、IE和Opera上，它返回百分比值，

css

返回像素数。（在Chrome上，无论哪种方式，我都可以得到百分比。）

---

如果您是通过样式表应用

left

，我认为没有任何方便的方法来获取您要查找的信息。您可以获得它，但这确实很不方便：通过查看所有已定义的样式规则，确定哪些样式规则适用于元素，并解析规则文本。您可以通过

document.stylesheets

访问样式表，它是文档的所有样式表的数组。每个样式表都有一组它定义的规则，这些规则可以是

cssRules

或

规则（取决于浏览器）。每个规则都有一个
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
由inline样式定义，而
top
由样式表定义（sonotinline）

使用Chrome 16：

css('left') says: 20%
style.left says: 20%
css('top') says: 10%
style.top says:
css（“左”）表示：20%
左边写着：20%
css（“顶部”）表示：10%
style.top说：
使用Firefox10：

css('left') says: 193.2px
style.left says: 20%
css('top') says: 73.5px
style.top says:
css（“左”）表示：193.2px
左边写着：20%
css（“顶部”）显示：73.5px
style.top说：
使用IE9：

css('left') says: 239.8px
style.left says: 20%
css('top') says: 59.3px
style.top says:
css（‘左’）表示：239.8px
左边写着：20%
css（“顶部”）显示：59.3px
style.top说：
之所以
style.top
始终为空，是因为
style
只反映内联样式，但为了完整性，我将其包括在内。
刚刚遇到了这个问题，并设法以这种方式获得它：

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

返回我
'100%'

但是
$（'#mySelector'）.css（'width'）

返回给我
'900px'

希望这有助于某人更新：在IE 11中，style.left不再有效。如果试图访问内联样式，请使用prop（）函数，然后将要查找的特定属性指定为数组键：

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

将以像素为单位返回属性
可能重复的是
左
内联应用，或通过样式表？@T.J.Crowder我真的不知道内联或样式表是什么意思。但是，我试图获取的规则是由javascript应用的。加载页面时，会进行AJAX调用，进行一些计算（百分比），并将css样式应用于文档（只需插入标题部分），以供元素使用。@nav\u nav：通过元素标记上的
style
属性应用内联样式，例如
。由样式表应用时，它是
样式
元素中的CSS或通过
链接rel=“stylesheet”
元素链接的CSS文件。从您的评论来看，它听起来像是由样式表应用的。如果是这样的话，那么恐怕您唯一的选择就是浏览样式信息（详细信息请参见我的答案）。啊，是的，我做了。看来我应该继续用皮克斯？这很奇怪<代码>样式。左
没有为我返回任何内容。@nav\u nav:在哪个浏览器上？是内联应用还是通过样式表应用
left
？它很重要（
style.left
将仅为内联样式填充）。将返回什么？