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

推薦する

OpenLayersはポイントフィーチャーレイヤーの集約表示方法を実現します

目次1. はじめに2. ポイントフィーチャーレイヤーの集約3. 重合の特殊処理4. 重合の特殊処理 ...

Linux 脆弱性スキャンツール lynis の使用分析

はじめに: Lynis は、徹底的なセキュリティ スキャンを実行できる Unix システム用のセキュ...

MySQL 5.7 zip アーカイブ バージョンのインストール チュートリアル

この記事では、MySQL 5.7 zipアーカイブ版のインストールチュートリアルを参考までに紹介しま...

Vueプロジェクトの支払い機能コードの詳細な説明

1. Alipay方式: Alipay メソッド: Alipay をクリックして支払い、バックエンド...

ウェブページで Enter キーを押すと自動的にフォームを送信し、他のページにジャンプするソリューション

ウェブページでEnterキーを押すと、フォームは自動的に送信され、他のページに移動します。クエリフォ...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...

dockerネットワーク双方向接続の詳細な説明

Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...

VS2022 リモート デバッグ ツールの使い方

WeChat 関連サービスをデバッグする場合など、職場のサーバー環境でリモートデバッグを行う必要があ...

ORM モデル フレームワークを使用して MySQL データベースを操作する方法

ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...

Vue Element フロントエンドアプリケーション開発開発環境の準備

目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...

フロントエンド開発における一般的なテクニックのまとめ

1. 記事タイトルリストの右側に日付を表​​示する方法:コードをコピーコードは次のとおりです。 &l...

MySQL Community Server 5.7.16 のグリーン バージョンをインストールしてリモート ログインを実装する方法

1. MySQL Community Server 5.7.16をダウンロードしてインストールします...

HTML マークアップ言語 - テーブルタグ

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL トランザクションと分離レベルの基本原理の簡単な分析

目次序文1. 取引の基本原則の簡単な分析原子性:持続性分離:一貫性: 2. 分離レベルの基本原理の分...

HTMLは読み取り専用のテキストボックスを実装しており、コンテンツを変更することはできません。

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!--方法 1: onf...