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', '赤');
サポートされている場合
/* サポートされています */
} それ以外 {
/* サポートされていません */
}参照する 翻訳 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: HTML&CSS&JS 互換性ツリー (IE、Firefox、Chrome)
>>: MySQL 上級学習インデックスの長所と短所、使用ルール
推薦する
js 基本構文と Maven プロジェクト構成チュートリアル ケース
目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...
Eclipse は Tomcat を構成しますが、Tomcat には無効なポート解決策があります
目次1. EclipseがTomcatを構成する2. Tomcat の無効なポートの解決方法方法1:...
GoのDockerデプロイメント用の基本イメージ2つの実装
1. golang:最新のベースイメージ mkdir gotest タッチメイン.go Docker...
CSS を使用して 3 つのステップでショッピング モールのカード クーポンを作成する
今日は618日、主要なショッピングモールはすべてプロモーション活動を行っています。今日は、次のように...
選択にスタイルを追加するための純粋な CSS (スクリプトなし) 実装
通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...
シンプルなドラッグ効果を実現するJavaScript
この記事では、ドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...
HTMLポップアップ透明レイヤーインスタンスのサイズを設定でき、比例することができます
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
Win 8 以降での最新の MySQL バージョン 5.7.17 (64 ビット ZIP グリーン バージョン) のインストールと展開のチュートリアル
まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...
cmd と python での MySQL の一般的な操作についての簡単な説明
環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...
MySQL の無効な左結合の問題を解決する方法とその使用上の注意
MySQLの左結合が無効であり、その使用方法今日SQLを書いていたとき、左結合を使用すると左のテーブ...
WeChatアプレットが検索ボックス機能を実装
この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...
IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル
この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...
Web デザイナーにはどのような知識体系が必要ですか?
製品設計者は、複雑で大規模な製造システムと多様な市場に直面しているため、知識体系には幅広さと深さの両...
Ubuntu 20.04の新バージョンでルートユーザーを使用してシステムにログインする方法の詳細なチュートリアル
Ubuntu 20.04 では、デフォルトで root ログインが有効になっていないため、デスクトッ...
Vue3 (V) HTTPライブラリaxiosの統合の詳細
目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...