JQuery.css возвращает свойство css в пикселях, когда оно фактически находится в процентах

Ответ 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, определяемый 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.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 отражает только встроенные стили, но я включил ее для полноты.

Ответ 2

Просто у вас была эта проблема и ей удалось получить ее так:

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

вернул меня '100%'

однако $('#mySelector').css('width');

вернул мне '900px'

Надеюсь, это поможет кому-то

Ответ 3

Обновление: в IE 11 style.left больше не работает. Если вы пытаетесь получить доступ к встроенному стилю, используйте функцию prop(), а затем укажите конкретный атрибут, который вы ищете, в качестве ключа массива:

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

вернет свойство в пикселях

Ответ 4

Я не думаю, что можно получить ширину, возвращаемую вам в процентах, поскольку браузер выполняет внутреннюю математику, а затем разрешает доступ к полученному значению px.

Однако вы можете определить процент, если знаете ширину элемента и ширину соответствующего содержащего элемента, например:

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