CSS変数を使用してスタイルを変更する方法の例

質問

js を使用して CSS 疑似クラススタイルを変更するにはどうすればよいでしょうか?しかし、js には疑似クラスセレクターがないので、どうすればよいでしょうか?要素クラスを切り替えたり、スタイルに新しいスタイルを動的に挿入したりするなど、インターネット上にはさまざまな方法があります。

次に別の方法を紹介します。これは、CSS 変数 (var) を設定し、この変数を JS を通じて変更してこれを実現する方法です。

例: div のホバー背景色を変更する

<!-- css -->
<スタイル タイプ="text/css">
    ：根 {
        --divHoverColor: 赤;
    }
    div {
        幅: 100ピクセル;
        高さ: 100px;
        背景：素焼き。
    }
    div:ホバー{
        背景: var(--divHoverColor);
    }
</スタイル>
<!-- html -->
<div onClick="onDivClick('green')"/>
<!-- js -->
<script type="text/javascript">
    関数onDivClick(値){
        document.documentElement.style.setProperty('--divHoverColor', 値);
    }
</スクリプト>

それでは、CSS 変数について理解しましょう。

1. 基本的な使い方

ローカル変数

div {
    --masterColor: 赤;
    背景: var(--masterColor);
}

グローバル変数

/* HTML の場合、:root は <html> 要素を参照します */
：根 {
    --masterColor: 赤;
}
div {
    背景: var(--masterColor);
}

2. 構文

var( <カスタムプロパティ名> [, <宣言値> ]? )

<custom-property-name> : カスタムプロパティ名

<宣言値> : 宣言値（フォールバック値）

例：

div {
    /*
    --masterColor は未定義なので、背景色は赤になります 
    カンマで区切られた複数の宣言値を定義できます。var(--masterColor, red, green)
    */
    背景: var(--masterColor, red);
}

変数はvar()を使用して参照できます

例：

div {
    --masterColor: 赤;
    --bgColor:var(--masterColor)
}

注意: 属性名には変数は使用できません。

エラー例:

div {
    --bg: 背景;
    var(--bg): 赤;
}

3. ブラウザのサポート

使えますか

@support検出の使用

@supports ( (--masterColor: 赤)) {
  /* サポートされています */
}
@supports ( not (--masterColor: red)) {
  /* サポートされていません */
}

JS検出の使用

定数 isSupported = window.CSS && window.CSS.supports 
    && window.CSS.supports('--masterColor', '赤');

サポートされている場合
  /* サポートされています */
} それ以外 {
  /* サポートされていません */
}

参照する

翻訳
CSS 変数の仕様

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML&CSS&JS 互換性ツリー (IE、Firefox、Chrome)

>>: MySQL 上級学習インデックスの長所と短所、使用ルール