JavaScriptでグラデーションカラーを設定する方法

JavaScript では、スタイル オブジェクト属性を使用してグラデーション カラーを設定できます。構文形式は「element object.style.backgroundImage='linear-gradient(angle, color, color)'」です。オブジェクトは別のスタイル宣言を表します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

実際、グラデーションの実装は最終的に CSS (スタイル) によって制御されます。

すべてのコードは JS で直接記述されます:

var test = document.getelementById(''test);
test .style.backgroundImage='linear-gradient(120deg, #155799, #159957)';

PS: の 'i'ここのbackgroundImageは大文字で書く必要があり、CSSのbackground-imageと同じように書くとJSで認識されません。

拡張情報:

css で記述した後、js で要素にクラスを追加して新しいスタイルを追加します:

Defined inスタイルシート スタイル

css：

.jianbian{
background-image: linear-gradient(120deg, #155799, #159957);
}

次に、js

js:

var test = document.getelementById(''test);
test.className = 'jianbian' ;

を通じて要素にクラスを追加します。これで終わりですが、まだ考慮する必要があります。相違点 ブラウザの互換性、グラデーションの書き方。

-webket-/-moz-like

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptでグラデーションカラーを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。