Хорошо, я искал документы 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.
Это не полный ответ на ваш вопрос, но это может быть рабочее решение для каплирования значений 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;
};
В руководстве jQuery указано:
Разница между .css(width) и .width() состоит в том, что последний возвращает единичное значение пикселя (например, 400), а первый возвращает значение с единицами нетронутыми (например, 400px).
Похоже, что поведение .css() было изменено в версии 1.3, или, по крайней мере, похоже на это из отслеживания ошибок.
Я тоже пытался найти хорошее (а не хакерское) решение, но пока еще не удалось.
Как уже отмечали некоторые другие, jQuery теперь использует перехватчики для перехвата некоторых свойств css. Вот общее решение, которое позволяет вам css и обходить эти крючки.
$.fn.hooklessCSS = function(name) {
var hooks = $.cssHooks;
$.cssHooks = {};
var ret = $(this).css(name);
$.cssHooks = hooks;
return ret;
}
Это действительно проблема в новых версиях jQuery. Если это важная функция для вас, вы можете попробовать понизить до 1.4.2, где она все еще работает правильно.
Источник: Комментарии http://api.jquery.com/css/
jQuery всегда * возвращает размеры, такие как ширина в единицах пикселей. Возможно, вы можете взять код из этого px в em инструмент преобразования, чтобы помочь вам получить значение, которое вы хотите.
Похоже, что 1.4.2 является самой последней версией, которая все равно вернет $(this).css('width') в свою назначенную единицу измерения, но, похоже, только в том случае, если ширина назначена в атрибуте style тега элемента. Если это в отдельном объявлении CSS, таком как ваш пример, оно возвращается как пиксели.
$(this).width() остается в пикселях.
(* в версиях 1.4.3 и более поздних)
jQuery теперь использует функцию cssHooks для определенных .css() запросов, width и height в частности.
Таким образом, функция width() и .css('width') проходят через один и тот же код.
если вы определяете стиль inline, вы можете использовать document.getElementById( "myObj" ). style.width для получения значения, как оно определено в встроенном стиле
Я не уверен, как захватить значение с внешнего листа.