使用 jQuery 应用 css3 渐变答案

【问题标题】：Applying css3 gradients with jQuery使用 jQuery 应用 css3 渐变
【发布时间】：2011-05-16 11:57:47
【问题描述】：

最终，我希望根据不同的事物动态改变渐变，但是如何让 jquery 应用 css3 渐变？

 //works
 $(element).css("background-image", "url(http://www.google.co.uk/images/logos/ps_logo2.png)");  

 //doesn't work
 $(element).css("background-image","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

 //doesn't work
 $(element).css("background-image","-moz-linear-gradient(left center,rgb(194,231,255) 28%,rgb(255,255,255) 28%");

我错过了什么？我也试过了

 $(element).css({background: "-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255)"});

这些方法无效吗？

【问题讨论】：

您的 CSS 在直接应用时也不起作用。
可能重复？ stackoverflow.com/questions/5735521/jquery-css-gradient/5735588
另请注意，如果您尝试应用其中包含无效空格的 CSS 样式，它们可能根本不适用（或者至少这就是我在 Chrome 中发生的情况。）在这种情况下，您我想通过并删除检查器中的所有额外空格，直到渐变更新，然后相应地更新您的 javascript

标签： jquery css gradient

【解决方案1】：

您的第二种方法看起来不错...也许您还需要为非 webkit 浏览器设置 css 样式...Cross-Browser CSS Gradient

Chrome 中的 works for me

$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});

也可以看看：http://www.colorzilla.com/gradient-editor/

【讨论】：

【解决方案2】：

另一个选择是使用 jQuery addClass 方法。这允许您动态添加和删除类以及与该类关联的任何格式，包括渐变。

【讨论】：

【解决方案3】：

这是一个小例子......

$("p").css({background:'linear-gradient(red,blue,red)'});

【讨论】：

【解决方案4】：

我使用的是 JSON 格式的连字符语法（我总是使用 JSON 格式来保持一致）。它在 Chrome 和 Firefox 中都能正常工作。

例如：

$("#googleFeed div:even").css({
    'background':'-webkit-linear-gradient(top,white,black)',        
});

【讨论】：

【解决方案5】：

试试这个

<div class="mygradient" />

$( '.mygradient' ).css( 
    "background-image", 
    "linear-gradient( to right, #dc8a8a 50%, red 10% )" 
);

【讨论】：

【解决方案6】：

在 jquery 中使用 .css() 时，我相信您必须使用属性的缩短版本。例如，margin-left 将是 marginLeft

$(element).css("backgroundImage","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

【讨论】：

旁注，web-kit 渐变不是背景图片而是背景
当您使用您提供的语法时，它应该是background-image。当您编写多个属性时，您应该使用 camelCase ... 就像这样：$(element).css({ backgroundImage : 'whatever'; })
这仅在使用对象表示法设置属性时才成立，例如.css({backgroundImage:blah})，而不是他使用的.css('background-image', blah)的实现
另外，Motown 是错误的，它是 background-image，而单独的 background 只是设置 background-image 的一种简写方式。