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

JavaScript を使用した CSS カスタム プロパティへのアクセス

カスタム CSS プロパティまたは CSS 変数は、スタイルシート全体でスタイル値を定義および再利用する方法を提供します。 。 JavaScript を使用してこれらのプロパティを操作するには、いくつかの方法があります。

1 つの方法は、「document.body.style.setProperty()」メソッドを使用することです。

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get

document.body.style.setProperty('--foo-bar', newValue); //set

たとえば、次のようになります。 「background-color」プロパティがカスタム プロパティ「--(mycolor)」を使用して設定されている提供されたコード スニペットは、次のように変更されます。

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

このメソッドは CSS カスタム プロパティの値を直接設定し、変更は要素の計算されたスタイルに反映されます。

あるいは、jQuery を使用して CSS を操作することもできます。カスタム プロパティ:

$('body').css('--foo-bar', newValue); //set

このメソッドは、jQuery の「css()」関数を使用して、次の値を設定または取得します。 CSS 変数を含む CSS プロパティ:

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

これらのメソッドを使用すると、CSS カスタム プロパティを動的に制御し、Web ページやアプリケーションの外観を変更できます。

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