JavaScript はどのようにして CSS カスタムプロパティにアクセスし、変更できるのでしょうか?-CSSチュートリアル-php.cn

JavaScript はどのようにして CSS カスタムプロパティにアクセスし、変更できるのでしょうか?

Linda Hamilton

リリース： 2024-12-09 03:01:09

オリジナル

868 人が閲覧しました

How Can JavaScript Access and Modify CSS Custom Properties?

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

JavaScript は、CSS 変数とも呼ばれる CSS カスタムプロパティにアクセスして操作するためのメソッドを提供します。通常の CSS プロパティとは異なり、これらのカスタムプロパティには、スタイルシートの var(...) 構文を通じてアクセスできます。

カスタムプロパティ値の取得

値を取得するにはカスタムプロパティの場合は、window.getComputedStyle(document.body).getPropertyValue('--name') を使用します。ここで --name はカスタムプロパティ名です。例:

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

ログイン後にコピー

カスタムプロパティ値の設定

カスタムプロパティ値を設定するには、document.body.style.setProperty('--name', value)、ここで --name はカスタムプロパティ名、value は新しい値です。例:

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

ログイン後にコピー

例

次のコードを考えてみましょう:

<body>
  <p>Let's try to make this text bold and the background red.</p>
  <button onclick="plain_js()">Plain JS</button>
  <button onclick="jQuery_()">jQuery</button>

  <script>
    function plain_js() { 
      document.body.style.setProperty('--mycolor', 'red');
      document.body.style['font-weight'] = 'bold';
    };
    function jQuery_() {
      $('body').css('--mycolor', 'red');
      $('body').css('font-weight', 'bold');
    }
  </script>
</body>

ログイン後にコピー

「Plain JS」または「jQuery」ボタンをクリックします。 --mycolor カスタムプロパティを赤太字に設定します。

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