是否可以使用 JQuery 更新多个后备 CSS 属性？
这是我的问题。我想使用 JQuery 实时更新网站的背景图像渐变，但我找不到更新同一属性的多个后备的方法。当然，我需要多个后备来支持跨浏览器。这是我的类的样子：
#bg_gradient
{
background-color: #dcbebe;
background-image: url(images/fallback-gradient.png);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#779eb0), to(#dcbebe));
background-image: -webkit-linear-gradient(top, #779eb0, #dcbebe);
background-image: -moz-linear-gradient(top, #779eb0, #dcbebe);
background-image: -ms-linear-gradient(top, #779eb0, #dcbebe);
background-image: -o-linear-gradient(top, #779eb0, #dcbebe);
}
然后是我的 JQuery：
$('#bg_gradient').css('background-image','url(../gradient.png)');
$('#bg_gradient').css('background-image','-webkit-linear-gradient(top, #fff, #000)');
$('#bg_gradient').css('background-image','-moz-linear-gradient(top, #fff, #000)');
...
当然，正如使用此方法所预期的那样，相同的背景图像属性只是被覆盖。
如何动态更新多个后备属性？是否可以？
更新：我忘了提及我正在使用算法生成梯度过渡，并且有数百个值需要动态更新。
Here is my problem. I want to update the background-image gradient of my site in real-time using JQuery, but I can't find a way to update multiple fallbacks for the same property. I need multiple fallbacks of course for cross-browser support. Here is what my class looks like:
#bg_gradient
{
background-color: #dcbebe;
background-image: url(images/fallback-gradient.png);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#779eb0), to(#dcbebe));
background-image: -webkit-linear-gradient(top, #779eb0, #dcbebe);
background-image: -moz-linear-gradient(top, #779eb0, #dcbebe);
background-image: -ms-linear-gradient(top, #779eb0, #dcbebe);
background-image: -o-linear-gradient(top, #779eb0, #dcbebe);
}
And then my JQuery:
$('#bg_gradient').css('background-image','url(../gradient.png)');
$('#bg_gradient').css('background-image','-webkit-linear-gradient(top, #fff, #000)');
$('#bg_gradient').css('background-image','-moz-linear-gradient(top, #fff, #000)');
...
Of course, as expected using this method, the same background-image property is just being overwritten.
How can I update multiple fallback properties dynamically? Is it possible?
UPDATE: I forgot to mention that I am generating gradient transitions using an algorithm, and have hundreds of values to dynamically update.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
通过调用 attr() 我可以直接更新样式属性，并传入我想要的任何内容，例如这是我正在做的：
By calling attr() I can update the style attribute directly, and pass in whatever I want, for example here is what I am doing:
正如您所指出的，为标签设置相同的 .css 只会覆盖它。一种解决方法（痛苦）是使用 jQuery.browser 标志 和 jQuery 编写一些条件逻辑.浏览器.版本。
As you pointed out setting the same .css for a tag will just overwrite it. A workaround (painful) would be to write some conditional logic using the jQuery.browser flags and jQuery.browser.version.
如果您发现解决方案，请更新；但现在，您是否反对使用两个不同的类并在它们之间切换？
Please update if you discover a solution; but for now, are you opposed to using two different classes and just toggle between them?