jQuery的動態CSS屬性分配

Question

分配CSS屬性上即時在jQuery是很容易做到。例如

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

你可以做類：

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

Answer 2

的解決方案是創建一個類與所需的屬性，將其添加到您的樣式表，並使用.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 3

因爲你是你爲什麼不使用這個插件使用jQuery？ http://archive.plugins.jquery.com/project/gradient

然後，您可以輕鬆地使用它：

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