JavaScript で CSS 変数を動的に変更するにはどうすればよいですか?

JavaScript を使用して CSS 変数を動的に変更する方法

JavaScript を使用して CSS 変数を変更する探求の中で、課題に遭遇したかもしれません。このクエリは、実行可能なソリューションを探索し、目標を達成するための正しい方法論を詳しく説明します。

HTML で '--main-text-color' 属性を設定する、または jQuery の "css( )」メソッドを使用すると、残念ながら無効な属性エラーが発生しました。 CSS 変数を適切に編集する鍵は、代替方法を利用することにあります。

信頼できる手法の 1 つは、「el.style.cssText」プロパティを利用することです。このプロパティに CSS 文字列を割り当てることで、複数の CSS 変数の割り当てを同時に指定できます。たとえば、「--main-background-color」変数を赤に変更するには、次のコードを実行します。

document.documentElement.style.cssText = "--main-background-color: red";

もう 1 つのオプションは、「el.style.setProperty」メソッドを使用することです。このメソッドは 2 つのパラメータを受け入れます: 変更したい CSS プロパティ (例: '--main-background-color') とその新しい値 (例: 'green'):

document.documentElement.style.setProperty("--main-background-color", "green");

最後に、次のように、属性名として「style」を指定し、CSS 変数の割り当てを含む文字列を指定することで、「el.setAttribute」メソッドを使用することもできます。以下:

document.documentElement.setAttribute("style", "--main-background-color: green");

これらのメソッドを実際に説明するために、次のデモを考えてみましょう。ページの読み込み時に、CSS 変数で定義された背景色がレンダリングされ、その後 JavaScript を使用して変更され、動的な変数の変更が示されます:

[コード例]

以上がJavaScript で CSS 変数を動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。