установка специфичных для браузера свойств CSS с помощью jQuery - PullRequest
Новая
       0

установка специфичных для браузера свойств CSS с помощью jQuery

1 голос
/ 05 ноября 2011

Я пытаюсь изменить значения градиента в свойстве background-image и не могу: (

  data = 'ff55dd';
  $(".el").css({
    'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))',
    'background-image' : '-webkit-linear-gradient(#' + data + ', #aa1133)',
    'background-image' : '-moz-linear-gradient(#' + data + ', #aa1133)',
    'background-image' : '-o-linear-gradient(top, #ff3345, #aa1133)',
    'background-image' : '-khtml-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))',
    'filter'           : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#' + data' + '\', endColorstr=\'#aa1133\', GradientType=0)',
    'background-image' : 'linear-gradient(#ff5534, #aa1133)'
  });

Ничего не происходит .....

Ответы [ 2 ]

4 голосов
/ 05 ноября 2011

Похоже, это перезаписывает правила, если вы вставляете их все сразу.

Я добавил их один за другим, и это похоже на работу. 

    $(".e1")
      .css('background-image','-webkit-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))')
      .css('background-image','-webkit-linear-gradient(#' + data + ', #aa1133)')
      .css('background-image','-moz-linear-gradient(#' + data + ', #aa1133)')
      ...
1 голос
/ 05 ноября 2011

Это не сработает.Зачем?Потому что в этом вызове «.css ()» вы на самом деле не пишете код CSS, вы пишете код JavaScript.В константе объекта, когда вы предоставляете много разных значений для одного и того же имени свойства, вы получите только одно свойство к тому времени, когда код .css () фактически получит объект в качестве параметра.Следовательно, останется только самое последнее значение «background-image», которое вы установили.Все остальные будут перезаписаны.

Другими словами, ваш код эквивалентен этому: 

$(".el").css({
    'filter'           : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#' + data + '\', endColorstr=\'#aa1133\', GradientType=0)',
    'background-image' : 'linear-gradient(#ff5534, #aa1133)'
});

Я сомневаюсь, что есть какой-либо способ сделать это с помощью jQuery, кроме прямой установки "атрибут style "для полного блока CSS, или для записи CSS в составной элемент <style>, который вы добавляете в DOM.

...