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

JavaScript での CSS 変数へのアクセス

Web 開発では、CSS 変数はスタイルを保存して再利用するための便利な方法を提供します。これらの変数は CSS で直接設定および変更できますが、JavaScript で値にアクセスする必要が生じる場合があります。

JavaScript から CSS 変数にアクセスするのは簡単です。その方法は次のとおりです。

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

要素の現在の計算されたスタイルを取得するには、getComputedStyle 関数を使用します。この関数は要素を引数として受け取り、その計算されたスタイルを CSSStyleDeclaration オブジェクトとして返します。

var style = getComputedStyle(element);

ステップ 2: 変数値を取得する

計算されたスタイルでは、CSSStyleDeclaration の getPropertyValue メソッドを使用して、任意の CSS 変数の値にアクセスできます。 物体。 getPropertyValue メソッドは変数の名前を引数として受け取ります。

var variableValue = style.getPropertyValue('variable-name');

たとえば、指定した例の CSS 変数 --color-font-general にアクセスするには、次のように記述します。

var fontColor = getComputedStyle(element).getPropertyValue('--color-font-general');

fontColor 変数は CSS 変数の値を保持するようになります。この場合は #336699 です。

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