JQuery кросс-браузер CSS3 встроенный стиль

Question

Можно получить что-то подобное из jquery?

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
background: -moz-linear-gradient(top, #2F2727, #1a82f7);"/>

Когда я использую:

$("#test").css({
   'background': '-webkit-linear-gradient(top, #2F2727, #1a82f7)',
   'background': '-moz-linear-gradient(top, #2F2727, #1a82f7)'
});

результат (в хром)

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); "/>

Answer 1

Нет, и вам не нужно.Вы не можете иметь несколько значений для одного свойства CSS.Это работает непосредственно в CSS, потому что повторяющиеся свойства перезаписывают друг друга, и в этом случае зависит от браузера.По сути, с этим CSS браузеры на основе webkit видят свойство, специфичное для webkit, и применяют его, затем видят неизвестное свойство и игнорируют его.Браузеры на основе Gecko увидят неизвестное свойство и проигнорируют его, затем увидят специфичное для Mozilla свойство и применит его.

Попробуйте свой код в Firefox - держу пари, что он будет работать нормально, за исключением того, что он покажетСвойство Mozilla вместо webkit.

Кроме того, если предполагается, что это CSS3, вы можете просто использовать linear-gradient вместо конкретных поставщиков, и тогда оно будет работать втакже все CSS3-совместимые браузеры.

РЕДАКТИРОВАТЬ: Ну, кроме linear-gradient на самом деле не поддерживается.Таким образом, вместо этого вы должны использовать эти специфичные для поставщика значения и дополнительно использовать -ms-linear-gradient для поддержки IE, -o-linear-gradient для поддержки Opera, а также использовать linear-gradient для будущей совместимости.;)

Answer 2

Это невозможно в jQuery, потому что ключи не могут быть продублированы. Вы должны использовать $.cssHooks или:

$("#test").css('background', '-webkit-linear-gradient(top, #2F2727, #1a82f7)')
          .css('background', '-moz-linear-gradient(top, #2F2727, #1a82f7)');

Вместо установки фиксированных стилей с помощью style, я рекомендую использовать функции *Class: addClass, removeClass и toggleClass.

Что касается HTML, вы должны использовать атрибут style:

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
 background: -moz-linear-gradient(top, #2F2727, #1a82f7);"/>