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、クラス (フォーマット/アプリケーション シナリオ/機能) などの違いの紹介。

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

推薦する

マルチポートおよびマルチドメイン名アクセスのNginx構成の実装

サーバーに複数のサイトを展開するには、異なるサイトにアクセスするために複数のポートを開く必要がありま...

mysql 10進データ型変換の実装

最近、次のデータ型のデータベースに遭遇しました:decimal(14,4)発生した問題は次のとおりで...

MySQL8インストーラーバージョングラフィックチュートリアル

インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...

Dockerで新しいイメージを手動で構築する方法

この記事では、Docker で新しいイメージを手動で構築する方法を紹介し、皆さんと共有します。詳細は...

ネイティブJSで禁止すべきメソッドの記述

目次ブロックレベル関数オブジェクトのプロトタイプを直接変更すると呼び出された人発信者評価ブロックレベ...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...

Vueドロップダウンメニューのコンポーネント開発の詳細説明

この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...

Linux サーバーと Windows システム間でファイルをアップロードおよびダウンロードする方法

背景: Linux サーバーのファイルのアップロードとダウンロード。 XShell+Xftp インス...

MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法を参考ま...

Centos7でポートを開く方法

CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...

新しい ECMAscript オブジェクト機能の紹介

目次1. オブジェクトのプロパティ1.1 属性表記2. プロパティ名を計算する3.オブジェクトメソッ...

シンプルなリスト機能を実装するミニプログラム

この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。...

エージェントを介したzabbix監視プロセスとポートの詳細なプロセス

環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...

CSS 経由で JS にパラメータを渡す方法

1. CSSを通す必要がある背景CSS におけるメディアクエリの用途は、デバイスサイズの判別、マウス...

Docker で Nginx イメージ サーバーを構築する方法

序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...