0

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 は以前に書き込まれたバージョンを単純に上書きするため、繰り返し呼び出されても機能しません。これは他にどのように行うことができますか？

4

3 に答える 3

3

解決策は、必要なプロパティを持つクラスを作成し、それをスタイルシートに追加し、.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%);
}

Jクエリ:

$('#element').addClass('gradientClass');
于 2013-02-05T08:42:25.480 に答える
0

jQuery を使用しているのであれば、このプラグインを使用してみませんか? http://archive.plugins.jquery.com/project/gradient

その後、簡単に使用できます。

$('.gradient').gradient({ from: '003366', to: '333333' });
于 2013-02-05T08:44:38.833 に答える
0

クラスを行うことができます：

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");
于 2013-02-05T08:46:44.703 に答える