JavaScript を使用して CSS 変数をプログラム的に変更するにはどうすればよいですか?-CSSチュートリアル-php.cn

JavaScript を使用して CSS 変数をプログラム的に変更するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-10 18:35:14

オリジナル

742 人が閲覧しました

How Can I Programmatically Change CSS Variables with JavaScript?

JavaScript を使用した CSS 変数の変更

CSS 変数を使用してプロジェクトの色を制御すると、テーマを簡単に設定できます。ただし、これらの変数をプログラムで設定するのは難しい場合があります。

当初、setAttribute と jQuery の .css メソッドを使用して属性を変更する試みが行われました。ただし、これらはエラーになります。

解決策:

CSS 変数は、これら 3 つのいずれかを使用して編集できます。メソッド:

el.style.cssText:

document.documentElement.style.cssText = "--main-background-color: red";

ログイン後にコピー

el.style。 setProperty:

document.documentElement.style.setProperty("--main-background-color", "green");

ログイン後にコピー

el.setAttribute:

document.documentElement.setAttribute("style", "--main-background-color: green");

ログイン後にコピー

最後のメソッドは最初に使用されたものですが、構文が正しくありませんでした。

デモ:

このデモでは、JavaScript によって変更される背景色を定義する CSS 変数を示します。 2秒後:

<html>
<head>
  <style>
    html {
      --main-background-image: url(../images/starsBackground.jpg);
      --main-text-color: #4CAF50;
      --main-background-color: rgba(0,0,0,.25);
      --beta-background-color: rgba(0,0,0,.85);
    }

    body {
      background-color: var(--main-background-color);
    }
  </style>
</head>
<body onload="setTimeout(function() {
    document.documentElement.style.cssText = '--main-background-color: red';
  }, 2000);">
</body>
</html>

ログイン後にコピー

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