jQuery动态CSS属性赋值答案

【问题标题】：jQuery dynamic CSS attribute assignmentjQuery动态CSS属性赋值
【发布时间】：2013-02-05 08:36:37
【问题描述】：

在 jQuery 中动态分配 CSS 属性非常简单。例如

$('#element').css('fontWeight','bold');

但是，我目前需要做的动态分配比较混乱。为了让背景渐变分配在一系列浏览器上工作，我需要做

background-image:-moz-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-webkit-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-o-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-ms-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);

$('#element').css('backgroundImage','value')

重复调用将不起作用，因为 jQuery 只是覆盖了以前编写的版本。这还能怎么做？

【问题讨论】：

标签： jquery internet-explorer google-chrome css safari

【解决方案1】：

解决方案是创建一个具有所需属性的类，将其添加到您的样式表中，然后使用 .addClass 将类动态分配给元素。

CSS：

.gradientClass{
background-image:-moz-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-webkit-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-o-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-ms-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
}

jquery：

$('#element').addClass('gradientClass');

【讨论】：

+1。处理类名比直接操作 css 属性要干净得多。
和第一个答案差不多，所以我决定接受第一个。无论如何，谢谢。
@DroidOS 最重要的答案并不总是第一个。如果你检查时间，我的之前已经做过了：P 不管怎样，只要你得到了你想要的东西。
感谢您的帮助 Yash。非常感谢。

【解决方案2】：

你可以上课：

BackgroundClass
{
background-image:-moz-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-webkit-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-o-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:-ms-linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
background-image:linear-gradient(0deg,rgba(r,g,b,a),rgba(r1,g1,b1,a1) 10%);
}

并将这个类添加到元素中：

$('#element').addClass("BackgroundClass");

【讨论】：

【解决方案3】：

既然你用的是jQuery，为什么不用这个插件呢？ http://archive.plugins.jquery.com/project/gradient

然后您就可以轻松使用它了：

$('.gradient').gradient({ from: '003366', to: '333333' });

【讨论】：

哎呀！ YAPL 再次来袭！