使用jQuery设置浏览器特定的CSS属性 [英] setting browser-specific CSS properties with jQuery

问题描述

我正在尝试修改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）'
}）; 
  

发生.....

解决方案

看起来像覆盖规则，如果你一次把它们全部。

我逐一添加它们，似乎工作。

  $ .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）'）
 ... 
  

I'm trying to modify gradient values in the background-image property and I can't :(

  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)'
  });

Nothing happens.....

解决方案

Looks like its overwriting the rules if you put them in all at once.

I added them one by one and it seems to work.

    $(".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)')
      ...

这篇关于使用jQuery设置浏览器特定的CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！