Есть ли переводчик jQuerys CSS для геттеров?

Question

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

$("#block1").css('background','blue');
$("#block2").css('backgroundColor', '#0000ff');
$("#block3").css('background-color', 'rgb(0, 0, 255)');

if ( $("#block1").css('background-color') == $("#block2").css('background-color') &&  
     $("#block1").css('background-color') == $("#block3").css('background-color') )
{
   alert ( 'same color : ' + $("#block1").css('background') );
}

Демо

Как вы видите, эти 3 разных метода установки делают одно и то же. Изменение цвета фона на синий.

Похоже, существуют переводы для метода сеттера метода .css.

Мне было любопытно, если есть переводы и для метода получения.

Answer 1

Это на самом деле не имеет ничего общего с jquery ... поддержка css в браузере полностью независима от способности jQuery поддерживать кросс-браузерный API (что вы правы, удивительно ;-)). Мне неприятно это говорить, но единственный способ выяснить это - попробовать этот фрагмент кода в разных браузерах, на которые вы ориентируетесь

Answer 2

по какой-то причине он не работал на моем Google-Chrome (3.0.195.27 - Windows), но работал на Firefox. надеюсь, это поможет.

редактирование: дальнейшие испытания показали интересные результаты.

a) кажется, что chrome преобразует # 0000ff в rgb (0,0,255), но то же самое не относится к "синему"

б) Firefox будет показывать очень разные результаты в зависимости от свойства, которое вы запрашиваете. Специально для свойства background-color он преобразует цвета в формат rgb (0,0,255)

просто смотрите:

хром, свойство 'background' http://img237.imageshack.us/img237/7223/chrome1.png хром, свойство 'background-color' http://img43.imageshack.us/img43/7383/chrome2.png chrome, свойство 'backgroundColor' http://img98.imageshack.us/img98/1127/chrome3.png firefox, свойство 'background' http://img40.imageshack.us/img40/2374/firefox1b.png firefox, свойство 'background-color' http://img40.imageshack.us/img40/3706/firefox2h.png firefox, свойство 'backgroundColor' http://img94.imageshack.us/img94/9139/firefox3.png

не стесняйтесь проверить самостоятельно.

Answer 3

jQuery с открытым исходным кодом, и хотя код не очень прост для чтения, с небольшими усилиями и с помощью Firebug, чтобы пройтись по коду, вы можете найти информацию, которую вы ищете. Позвольте мне помочь вам с jquery-1.3.2.

Для установки стиля посмотрите на строку 1037. Как видите, в jQuery есть только специальная обработка непрозрачности IE. Он также использует регулярное выражение для преобразования имени стиля в нотацию верблюда. Таким образом, background-color будет фактически переведено на backgroundColor. Смотрите также функцию поддержки (строка 698). При задании числа для свойства css, когда единицы измерения не определены, будет использоваться «px». См. Метод exclude (строка 612) для свойств, исключенных из этого шаблона.

Для чтения свойства см. Функцию curCSS в строке 781. Опять непрозрачность специально обрабатывается. Также есть довольно сложный код для обработки каскадных стилей. Смотрите это обсуждение , на которое фактически ссылается код jQuery. И снова IE должен быть обработан специальным образом.

Существует также небольшая разница при чтении стиля для backgroundColor и background-color. Чтобы понять, что происходит, вы можете запустить следующий код:

element = document.getElementById('block1');
alert(element.style['backgroundColor']);
alert(element.style['background-color']);
alert(document.defaultView.getComputedStyle( element, null ).getPropertyValue( 'background-color' ));

При чтении jQuery не переводит все стили в случай верблюда. Если style[name] определен, он возвращает его напрямую. В противном случае он использует getComputedStyle. Для каскадных стилей все сложнее.

Answer 4

Когда вы устанавливаете свойство CSS, это проблема браузера.

jQuery «нормализуется» только при чтении свойства

Answer 5

Вам нужно установить backgroundColor вместо background-color, как если бы вы делали это, используя стандартный JS - т.е.