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 サイトの他の関連記事を参照してください。