JavaScript を使用して CSS カスタム プロパティ (変数) にアクセスして変更するにはどうすればよいですか?

JavaScript を介した CSS カスタム プロパティ (変数) へのアクセス

JavaScript は、CSS 変数と呼ばれる CSS カスタム プロパティと対話する手段を提供します。スタイルシートでは var() として定義されていますが、JavaScript を介してアクセスするには少し異なるアプローチが必要です。

カスタム プロパティの取得と設定

カスタム プロパティの値を取得するにはプロパティを設定するには、次の構文を使用します:

var value = document.body.style.getPropertyValue('--property-name');

同様に、カスタム プロパティを設定するには、 use:

document.body.style.setProperty('--property-name', 'new-value');

実装例

要素の背景色として CSS で定義されたカスタム プロパティ --mycolor を考えてみましょう。 JavaScript を使用して色を変更するには、次のコードを実行できます。

document.body.style.setProperty('--mycolor', 'red');

代替メソッド

jQuery には、カスタム プロパティを操作するためのメソッドも用意されています。

// Get property
var value = $('body').css('--property-name');

// Set property
$('body').css('--property-name', 'new-value');

一般的なものを避ける落とし穴

最初の例で示したように、標準の [style.property] 構文 (document.body.style['--mycolor'] など) を使用したカスタム プロパティへのアクセスは機能しません。代わりに、プロパティ名の前に二重ハイフンを付けて getPropertyValue メソッドと setProperty メソッドを使用します。

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