ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript を使用して CSS カスタム プロパティにアクセスして変更するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-12-13 04:38:01
オリジナル
864 人が閲覧しました

How Can I Access and Modify CSS Custom Properties with JavaScript?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート