Функция jQuery.css() не возвращает ожидаемые значения

Хорошо, я искал документы jQuery (кому-то, кому нужно было поддерживать), я искал SO, и я искал Google. Я не могу найти ответ на этот вопрос.

В словах

В прошлом я помню, как jQuery работал следующим образом:

$('#myObj').width() возвращает вычисленную ширину #myObj.
$('#myObj').css('width') возвращает ширину, поскольку она вводится в таблицу стилей CSS.

Теперь любой пакет jQuery, который я использую, возвращает то же самое число независимо от того, какой метод я использую.

$('#myObj').width() возвращает вычисленную ширину #myObj как целое число (float?).
$('#myObj').css('width') возвращает вычисленную ширину #myObj как строку с px в конце.

В псевдокоде

#myobject{
    width: 14em;
    height: 14em;
}

<div id="myobject">Has Text</div>

<script type="text/javascript">
    $( '#myobject' ).click(function(){
        alert($(this).css('width') + "\n" + $(this).width());
    });
</script>

//Always alerts "224px [newline] 224"
//Expected to alert "14em [newline] 224"

Эти значения возврата на основе пикселя почти полностью бесполезны, так как мне нужно делать вычисления, основанные на том, что на самом деле в CSS. Например, я хочу сделать математику в позиции left элемента, но я не могу, потому что он сохраняет возвращаемые значения пикселей, которые бесполезны в проекте em.

Есть ли способ получить фактические значения из CSS в jQuery?
Является ли это ошибкой jQuery, или я что-то упускаю?

Здесь jsfiddle: http://jsfiddle.net/yAnFL/1/.

Решение

По-видимому, это намеченный результат.
Я решил использовать этот плагин, чтобы делать конверсии для меня.
Убрать контроль над CSS представляется плохой выбор в дизайне jQuery.

ОТВЕТЫ

Ответ 1

Это не полный ответ на ваш вопрос, но это может быть рабочее решение для каплирования значений em. Я применил эту функцию от здесь. И здесь - обновленная скрипка.

$.fn.emWidth = function(){
    var wpx = this.width();
    var temp = $('<div />').css({
        width:'1em', 
        position: 'absolute'
    });
    this.append(temp);
    var oneEm = temp.width();
    temp.remove();
    var value = wpx/oneEm;
    return Math.round(value*100)/100;
};

Ответ 2

В руководстве jQuery указано:

Разница между .css(width) и .width() состоит в том, что последний возвращает единичное значение пикселя (например, 400), а первый возвращает значение с единицами нетронутыми (например, 400px).

Похоже, что поведение .css() было изменено в версии 1.3, или, по крайней мере, похоже на это из отслеживания ошибок.

Я тоже пытался найти хорошее (а не хакерское) решение, но пока еще не удалось.

Также на SO.

Ответ 3

Как уже отмечали некоторые другие, jQuery теперь использует перехватчики для перехвата некоторых свойств css. Вот общее решение, которое позволяет вам css и обходить эти крючки.

$.fn.hooklessCSS = function(name) {
    var hooks = $.cssHooks;
    $.cssHooks = {};
    var ret = $(this).css(name);
    $.cssHooks = hooks;
    return ret;
}

Ответ 4

Это действительно проблема в новых версиях jQuery. Если это важная функция для вас, вы можете попробовать понизить до 1.4.2, где она все еще работает правильно.

Источник: Комментарии http://api.jquery.com/css/

Ответ 5

jQuery всегда * возвращает размеры, такие как ширина в единицах пикселей. Возможно, вы можете взять код из этого px в em инструмент преобразования, чтобы помочь вам получить значение, которое вы хотите.

Похоже, что 1.4.2 является самой последней версией, которая все равно вернет $(this).css('width') в свою назначенную единицу измерения, но, похоже, только в том случае, если ширина назначена в атрибуте style тега элемента. Если это в отдельном объявлении CSS, таком как ваш пример, оно возвращается как пиксели.

$(this).width() остается в пикселях.

(* в версиях 1.4.3 и более поздних)

Ответ 6

jQuery теперь использует функцию cssHooks для определенных .css() запросов, width и height в частности.

Таким образом, функция width() и .css('width') проходят через один и тот же код.

Ответ 7

если вы определяете стиль inline, вы можете использовать document.getElementById( "myObj" ). style.width для получения значения, как оно определено в встроенном стиле

http://jsfiddle.net/yAnFL/14/

Я не уверен, как захватить значение с внешнего листа.