jquery - jQuery动态CSS属性赋值

Question

在 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 只是覆盖了以前编写的版本。这还能怎么做？

Answer 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%);
}

查询：

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

Answer 2

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

然后，您可以轻松使用它：

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

Answer 3

你可以上课：

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");