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

JavaScript での CSS カスタム プロパティの操作

最新の Web 開発では、CSS カスタム プロパティ (CSS 変数とも呼ばれます) が重要な役割を果たします。スタイルのカスタマイズとコードの保守性を強化します。これらのプロパティはスタイルシート内で定義でき、var(...) 構文を使用してアクセスできます。ただし、JavaScript を使用して CSS カスタム プロパティにアクセスして操作するには、特有の課題があります。

カスタム プロパティへのアクセスと操作

JavaScript を使用して CSS カスタム プロパティにアクセスするには、ドキュメントを利用できます。 .body.style.setProperty() メソッド。このメソッドは 2 つの引数を受け入れます:

• --name: 2 つのダッシュ (--) を先頭に付けたカスタム プロパティの名前。
• value: 割り当てる値

たとえば、提供された HTML で定義されている「--mycolor」カスタム プロパティを変更するにはコード:

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

プロパティ操作のための jQuery

あるいは、jQuery の css() メソッドを使用して同じことを実現できます。結果:

$('body').css('--mycolor', 'red');

例

提供された HTML コードで、間違った構文を使用して '--mycolor' プロパティを変更しようとしました。目的の効果を実現するには、次の変更が必要です。

function plain_js() { 
  document.body.style['font-weight'] = 'bold';
  document.body.style.setProperty('--mycolor', 'red');
}

function jQuery_() {
  $('body').css('font-weight', 'bold');
  $('body').css('--mycolor', 'red');
}

適切な構文を使用することで、「font-weight」プロパティと「--mycolor」カスタム プロパティの両方を正常に設定できるようになりました。ターゲット要素のテキストと背景色を動的に変更します。

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