質問 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 上級学習インデックスの長所と短所、使用ルール
序文スクロールやサイズ変更などのスクロール イベントがトリガーされると、トリガーの頻度が非常に高くな...
CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...
序文皆さんは Linux で top コマンドを使ったことがあると思います。私は Linux に触れ...
docker コンテナを使用する場合、vim がインストールされていないことがあり、vim コマンド...
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...
日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...
Docker を正式に使用する前に、まず Docker でよく使用されるコマンドに慣れておきましょう...
DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...
序文MySQL クエリは select コマンドを使用し、limit および offset パラメー...
目次文章1. 機械を準備する2. Dockerをインストールする1. 依存パッケージをインストールす...
序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...
目次ノードイベントループイベントループ図メインスレッドイベントループタイマーキューの仕組み投票キュー...
サーバー情報管理サーバー: m01 172.16.1.61サーバー: nfs01 172.16.1....
目次序文1. Iceraven ブラウザ (Firefox) (Android) 2. (アンドロイ...
一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...