jQuery .css以像素为单位返回css属性,实际上以百分比表示

Question

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

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

问题是,上面以pixles的形式返回...

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

Answer 1

如果您正在申请left内联,则可以直接访问style.left,例如:

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

对我来说,在Firefox,IE和Opera上,返回百分比值,css返回像素数.(在Chrome上,我获得了百分比.)

如果您left通过样式表申请,我认为没有任何方便的方式来获取您正在寻找的信息.你可以得到它,但它确实很不方便:通过查看所有已定义的样式规则,确定哪些适用于元素,以及解析规则文本.您可以访问样式表via 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') says: 20%
style.left says: 20%
css('top') says: 10%
style.top says:

使用Firefox 10:

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

使用IE9:

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

原因style.top总是空白的是style只反映内联样式,但我将它包含在内以保证完整性.

Answer 2

刚遇到这个问题并设法以这种方式得到它:

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

我回来了 '100%'

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

我回来了 '900px'

希望这有助于某人