CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくあります。

<スタイル>
    .d1{
      表示: なし;
    }
    .d2{
      可視性: 可視;
    }
    .d3{
      不透明度: 0;
    }
  </スタイル>

  <div class="d1" onclick="clickEvent('display: none;')"></div>
  <div class="d2" onclick="clickEvent('visibility: hidden;')"></div>
  <div class="d3" onclick="clickEvent('不透明度: 0;')"></div>
  <script type="text/javascript">
    関数 clickEvent(type){
      アラート(タイプ)
    }
  </スクリプト>

表示: なし;

  1. DOM 構造: ブラウザは display:none; の要素をレンダリングせず、スペースを占有しません。
  2. イベント監視: DOMイベント監視は不可能です
  3. パフォーマンス: このプロパティを動的に変更すると順序が変更され、パフォーマンスが低下します。
  4. 継承: 子要素はレンダリングされないため、子要素には継承されません。
  5. トランジション: トランジションは表示をサポートしていません

可視性: 非表示;

  1. DOM構造: 要素は非表示ですが、レンダリングされ、消えることはなく、スペースを占有します。
  2. イベント監視: DOMイベント監視は不可能です
  3. パフォーマンス: このプロパティを動的に変更すると再描画が行われ、パフォーマンスが向上します。
  4. 継承: 子要素に継承されますが、visibility: visible を設定することで子要素を非表示にすることができます。
  5. 遷移: 表示はすぐに表示され、非表示は遷移できます

不透明度: 0;

  1. DOM構造: 透明度が100%の場合、要素は非表示になり、スペースを占有します。
  2. イベント監視:DOMイベントを監視できます
  3. パフォーマンス: 合成レイヤーに昇格され、再描画がトリガーされず、パフォーマンスが向上します。
  4. 継承: 子要素に継承され、子要素は opacity: 1 によって非表示解除できません。
  5. トランジション: 非表示と表示の両方でトランジションをサポート

rgb

  1. background: rgba(R, G, B, 0)、背景色のみが透明で、要素は透明でありながらスペースを占有します。
  2. 背景: rgba (R, G, B, 0) は子要素に継承されません
  3. バインドされたイベントは引き続きトリガーできます。
  4. 遷移は有効です。

Zインデックス: -1

  1. z-index の設定は、要素の現在の DOM がドキュメント フローの外にある場合にのみ機能します (位置: absolute)。
  2. z-index: -1 を設定すると、基本的に現在の DOM のスタック コンテキストが変更され、要素が他の要素の下に配置され、非表示の目的が達成されます。
  3. 他のレイヤーのレイアウトに影響を与えずに部分的な再配置
  4. 他の要素によってブロックされた部分はイベントに応答できず、上位の要素にpointer-events:none;が設定されていてもクリックできません(注:このプロパティは継承されます)

ちょっとした実験

ぜひご自身で試してプレイしてみてください。

//html
<div class="コンテナ">
    <div class="target">
        <p>私はターゲットです、あなたは?</p>
    </div>
</div>


// css
  <スタイル>
      。容器{
          マージン: 0 自動;
          幅: 500ピクセル;
          最小高さ: 30px;
          背景色: スカイブルー;
      }
      。ターゲット{
          幅: 200ピクセル;
          高さ: 50px;
          行の高さ: 50px;
          テキスト配置: 中央;
          マージン: 0 自動;
          背景色: プラム;
          色: #fff;
          遷移: すべて線形 1;
          カーソル: ポインタ;
      }
      .クリックブロック{
        表示: なし;
      }
      .クリック可視性{
          可視性: 非表示;
      }
      .clickOpacity{
          不透明度: 0;
      }
      .clickRgba​​{
          背景色: rgba(221, 160, 221, 0);
      }
      .clickZindex{
          Zインデックス: -1;
          位置: 絶対;
      }
  </スタイル>

// js
    _target は、 document.getElementsByClassName("target")[0] に格納されます。
    _target.onclick = (() => {
        let i = 1; // クリック回数 return () => {
        // _target.attributes.class.value += " clickBlock";
        // _target.attributes.class.value += " clickVisibility";
        // _target.attributes.class.value += " clickOpacity";
        // _target.attributes.class.value += " clickRgba​​";
        _target.attributes.class.value += " clickZindex";
        console.log(`${i} 番目のクリック`);
        私は++;
    }})();

CSS の Display、Visibility、Opacity の違いについての記事はこれで終わりです。非表示のコンテンツを制御する CSS の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  HTML 名、ID、クラス (フォーマット/アプリケーション シナリオ/機能) などの違いの紹介。

>>:  モバイルウェブページのサイズ調整を実装する方法

推薦する

MySQL 5.7 でパスワードを変更するときに発生する ERROR 1054 (42S22) の解決方法

MySQL 5.7 を新しくインストールしました。ログインすると、パスワードが間違っているというメッ...

優れたユーザー エクスペリエンス デザイナーが行うべき 5 つのこと (画像とテキスト)

この記事は、@C7210 によって翻訳されたブログ「Usability Counts」からの翻訳です...

MySQLのネストされたトランザクションで発生する問題

MySQL はネストされたトランザクションをサポートしていますが、それを実行する人は多くありません....

MySQLのインストールと設定方法のグラフィックチュートリアル(CentOS7)

1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...

Centos 7 システムの Tomcat サーバーの詳細な分析

目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...

よくある MySQL テーブル設計エラーの概要

目次間違い1: データの列が多すぎる誤解2: 共同クエリが多すぎる誤解3: ENUMの代わりにSET...

MySQL における or、in、union、インデックス最適化の詳細な分析

この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...

MySQL マルチバージョン同時実行制御 MVCC の詳細な研究

MVCC MVCC (Multi-Version Concurrency Control) は、マル...

Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...

理論: 2年間のユーザーエクスペリエンス

<br />国内のウェブサイトが本格的に普及し、ユーザーエクスペリエンスに重点が置かれる...

Tomcat のインストール後に起こりうる問題の紹介

1. Tomcatサービスが開いていませんブラウザのアドレスバーにlocalhost:8080と入力...

年末ですが、MySQL パスワードは安全ですか?

序文:年末です。データベースを検査する時期ではないでしょうか?一般的に、検査では、パスワードの複雑さ...

MySQL エラー 1290 (HY000) の解決方法

私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...

この記事では、CSSのようなJSモジュールをインポートする方法を説明します。

目次序文構築可能なスタイルシートとは何ですか? CSSモジュールスクリプトの使用インポートアサーショ...