Question

在jQuery中即时分配CSS属性非常简单。 e.g。

$('#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%);
}

Jquery的：

$('#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");

jQuery动态CSS属性赋值

3 个答案: