Javascript / Jquery: пиксельные значения .css - PullRequest
4 голосов
/ 11 февраля 2010

Я только что понял, что есть разница между

<foo>.css('marginTop')

(который я считал стандартной jquery-нотацией) и

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

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

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

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

П.С .: Просто чтобы быть точным: конечно, другие атрибуты, но на полях работают также ...

Спасибо!

Ответы [ 2 ]

6 голосов
/ 11 февраля 2010

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

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

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

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

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

1 голос
/ 11 февраля 2010

Разница связана с нотацией CSS и JavaScript одного и того же. Это будет не в jQuery API, а в справочнике CSS.

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

Подробнее см. http://www.w3schools.com/css/css_reference.asp.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...