質問 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 上級学習インデックスの長所と短所、使用ルール
目次1. はじめに2. ポイントフィーチャーレイヤーの集約3. 重合の特殊処理4. 重合の特殊処理 ...
はじめに: Lynis は、徹底的なセキュリティ スキャンを実行できる Unix システム用のセキュ...
この記事では、MySQL 5.7 zipアーカイブ版のインストールチュートリアルを参考までに紹介しま...
1. Alipay方式: Alipay メソッド: Alipay をクリックして支払い、バックエンド...
ウェブページでEnterキーを押すと、フォームは自動的に送信され、他のページに移動します。クエリフォ...
序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...
Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...
WeChat 関連サービスをデバッグする場合など、職場のサーバー環境でリモートデバッグを行う必要があ...
ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...
目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...
1. 記事タイトルリストの右側に日付を表示する方法:コードをコピーコードは次のとおりです。 &l...
1. MySQL Community Server 5.7.16をダウンロードしてインストールします...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
目次序文1. 取引の基本原則の簡単な分析原子性:持続性分離:一貫性: 2. 分離レベルの基本原理の分...
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!--方法 1: onf...