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

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 上級学習インデックスの長所と短所、使用ルール

推薦する

CSS フロントエンドページレンダリング最適化属性 will-change の具体的な使用法

序文スクロールやサイズ変更などのスクロール イベントがトリガーされると、トリガーの頻度が非常に高くな...

CentOS 7にMySQLをインストールする詳細な手順

CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...

Linuxのtopコマンド出力の詳細な説明

序文皆さんは Linux で top コマンドを使ったことがあると思います。私は Linux に触れ...

dockerコンテナにviコマンドをインストールする簡単な操作

docker コンテナを使用する場合、vim がインストールされていないことがあり、vim コマンド...

表示または可視性によってHTML要素を非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...

Docker初心者が初めてよく使うコマンドを試してみる練習記録

Docker を正式に使用する前に、まず Docker でよく使用されるコマンドに慣れておきましょう...

Dockerを使用してOracle_11gをインストールする方法

DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...

MySQLクエリのパフォーマンスに影響を与える大きなオフセットの理由と最適化の詳細な説明

序文MySQL クエリは select コマンドを使用し、limit および offset パラメー...

Docker、プレーヤー機能を備えたCMSオンデマンドシステムを構築

目次文章1. 機械を準備する2. Dockerをインストールする1. 依存パッケージをインストールす...

Linux で完全な Samba サーバーを構築する方法 (CentOS バージョン)

序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...

Nodeイベントループの包括的な理解

目次ノードイベントループイベントループ図メインスレッドイベントループタイマーキューの仕組み投票キュー...

Linux で NFS のワンクリック展開を実装する方法

サーバー情報管理サーバー: m01 172.16.1.61サーバー: nfs01 172.16.1....

携帯電話に GreasyFork js スクリプトをインストールするチュートリアル

目次序文1. Iceraven ブラウザ (Firefox) (Android) 2. (アンドロイ...

Mysql5.7 のグループ連結関数を使用するときにデータが切り捨てられる問題に対する完璧な解決策

一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...