2010-02-11 3 views
4
-

Я просто понял, что есть разница междуJavaScript/Jquery: .css пиксельные значения

<foo>.css('marginTop') 

(который я думал, это стандарт JQuery-обозначения) и

<foo>.css('margin-top') 

(который я думал был нестандартным).

Если имеет верхний край: 3em; (например), первое обозначение дает мне 3em, второе обозначение дает мне 48px (что равно 3em в пикселях). Мне нравится это поведение, но я не мог найти ничего об этом в API (или я слепой?)

Почему это так и где я могу найти информацию об этом?

P.S .: Просто чтобы быть точным: конечно другие атрибуты, но маржа-топ работы Aswell ...

Спасибо!

+1

Какие браузеры демонстрируют это поведение? –

+0

сейчас я тестировал его только с Firefox. Но поскольку JSizes (http://www.bramstein.com/projects/jsizes/), похоже, использует те же функции, что и я, я довольно оптимистичен, по крайней мере, «тире-нотация» работает и в других браузерах , Кстати, спасибо за ваш ответ! – speendo

ответ

6

Документ говорит, что «jQuery может одинаково интерпретировать CSS и DOM-форматирование свойств нескольких слов», но на самом деле он делает это через грубые и готовые хаки, которые не всегда ведут себя предсказуемо.

В частности, если вы поставили DOM-стиль camelCaseName, он сначала попытается получить доступ к объявлению стиля inline как style.camelCaseName. Затем, если это не удается (обычно, поскольку стиль не был установлен в строке), он возвращается к попытке getComputedStyle с camelCaseName, преобразованным в hyphen-separated-name (*). Вычисленный стиль - это не то же самое, что объявленный стиль: браузер может разрешать различные относительные объявления в вычисленном стиле, например, преобразовывать длины в пиксельные единицы.

Однако реверс не поддерживается! Если вы предоставили CSS-стиль hyphen-separated-name, он перескакивает прямо на код вычисленного стиля (*), не пытаясь преобразовать его в camelCaseName и посмотреть на встроенный стиль.

Я не думаю, что я хотел бы полагаться на это поведение ... это пахнет немного багги для меня. Если вы можете сохранить декларацию стиля inline от элемента, который хотите измерить, вы должны быть уверены, что всегда будете получать вычисленный стиль независимо от того, какой тип имени вы используете. Но опять же, jQuery не дает вам это как документированное обещание. Такова природа попытки скрыть сложную модель за кажущимся простым интерфейсом «Do What I Mean».

(*): за исключением IE, где нет getComputedStyle функции, поэтому он возвращается к странным и хрупкой смеси currentStyle, runtimeStyle и документ изменения, чтобы попытаться получить вычисляемый стиль вне.

+0

Я могу подтвердить это, посмотрев код, и это гораздо лучшее объяснение. К сожалению, это приводит к тому, что VS 2010 Beta рушится на моем ПК и заставляет меня перезагружаться довольно иронично, пока я был на середине загрузки RC. Ну, это бета! –

+1

О, и я должен добавить, что IE не проявляет этого поведения, потому что, как заметил @bobince, он не использует 'getComputedStyle', а' currentStyle' возвращает значение в 'em', если оно указано в' em', в отличие от ' getComputedStyle', который возвращает 'px'. –

+0

Большое спасибо за это объяснение и благодарю вас, Энди, особенно за то, что вы даже завалили свой компьютер, чтобы ответить мне ;-) Где я могу прочитать про getComputedStyle? – speendo

1

Разница связана с обозначением CSS и JavaScript одним и тем же. Это было бы не в API jQuery, а в ссылке на CSS.

CSS использует верхний край, в то время как JavaScript использует marginTop для одной и той же вещи. Значение по умолчанию в CSS (margin-top) равно 0px. Поэтому вы получаете 48px вместо 3em.

См. http://www.w3schools.com/css/css_reference.asp для получения дополнительной информации.

+0

звучит хорошо, спасибо! В этом случае, могу ли я полагаться на всегда получение значения px, когда я использую «тире-нотацию»? – speendo

+0

Свойства DOM и свойство CSS связаны. Если я установил один, доступ к другому должен быть одинаковым. Я не понимаю, как ваш ответ объясняет поведение, заданное @Marcel. –

+0

Это различие между em и px. CSS по умолчанию использует px, а JavaScript, по-видимому, использует em по умолчанию. –

Смежные вопросы