使用jQuery设置浏览器特定的CSS属性

setting browser-specific CSS properties with jQuery

本文关键字：CSS 属性 jQuery 设置 浏览器 使用      更新时间：2023-09-26

我正在尝试修改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)')
      ...

这行不通。为什么?因为在调用"。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)'
});

我怀疑除了直接将"style"属性设置为完整的CSS块，或将CSS写入构建的<style>元素中，然后添加到DOM之外，没有任何方法可以通过jQuery做到这一点。

相关文章：