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

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

CSS 変数は、CSS ファイルにスタイル情報を保存するための強力なツールです。 JavaScript からこれらにアクセスできるため、Web アプリケーションの外観を動的に更新できます。

JavaScript から CSS 変数にアクセスするには、getComputedStyle() メソッドを使用して、CSS 変数の計算されたスタイルを取得できます。要素を選択し、getPropertyValue() メソッドを使用して、目的のプロパティの値を取得します。

たとえば、次の CSS 変数があるとします。宣言:

:root {
  --color-font-general: #336699;
}

次のコードを使用して、JavaScript でこの変数の値にアクセスできます:

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

これにより、--color-font-general CSS の値が返されます。文字列としての変数。この値を使用して、テキスト要素の色を設定するなどして、Web アプリケーションの外観を動的に調整できます。

この手法を使用してすべてのテキスト要素の色を変更する方法の例を次に示します。ドキュメント内:

var elements = document.getElementsByTagName('p');
for (var i = 0, element; element = elements[i++];) {
  element.style.color = getComputedStyle(element).getPropertyValue('--color-font-general');
}

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