JavaScript を使用して CSS 変数にアクセスするにはどうすればよいですか?

JavaScript で CSS 変数にアクセスする方法

JavaScript から CSS 変数にアクセスすると、Web アプリケーションのスタイルを動的に操作できます。これを実現する方法は次のとおりです。

ステップ 1: 計算されたスタイルを取得する

getComputedStyle 関数を使用して、ターゲット要素の計算されたスタイルを取得します。

ステップ 2: プロパティを取得するValue

getPropertyValue メソッドを使用して、目的の CSS 変数の値を取得します。

構文:

getComputedStyle(element).getPropertyValue('--variable-name');

例:

値を取得する場合提供されたコード スニペットで宣言された --color-font-general CSS 変数の値:

var style = getComputedStyle(document.body);
var color = style.getPropertyValue('--color-font-general');

このコードは、CSS 変数の値を取得し、それを color 変数に保存します。

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