表示または可視性によってHTML要素を非表示にする

表示または可視性によってHTML要素を非表示にする
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを制御する必要があります。これは、display または visibility を通じて実現できます。次の例は、表示と可視性の違いを示しています。簡単なサンプル コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<title>HTML 要素の表示と非表示のコントロール</title>
<script type="text/javascript">
関数 showAndHidden1(){
var div1 = document.getElementById("div1");
div2 要素を取得します。
if(div1.style.display=='block') div1.style.display='none';
それ以外の場合は、div1.style.display='block';
div2.style.display=='block' の場合、 div2.style.display='none';
それ以外の場合は、div2.style.display='block';
}
関数 showAndHidden2(){
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
div3.style.visibility=='表示'の場合、div3.style.visibility='非表示';
それ以外の場合は、div3.style.visibility='visible';
div4.style.visibility=='表示'の場合、div4.style.visibility='非表示';
それ以外の場合は、div4.style.visibility='visible';
}
</スクリプト>
</head>
<本文>
<div>display: 要素の位置が占有されていません</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" onclick="showAndHidden1();" value="DIV スイッチ" />
<時間>
<div>可視性: 要素の位置はまだ占有されています</div>
<div id="div3" style="visibility:visible;">DIV 3</div>
<div id="div4" style="visibility:hidden;">DIV 4</div>
<input type="button" onclick="showAndHidden2();" value="DIV スイッチ" />
</本文>
</html>

<<:  CSSのさまざまな背景、使用シナリオ、テクニックの詳細な分析

>>:  MySQLの基本的な共通コマンドの概要

推薦する

Nginx を使用して IP アドレスが悪意を持って解決されるのを防ぐ方法

Nginxを使用する目的Alibaba Cloud ECS クラウド サーバーを使用して、まずは著者...

js でオブジェクトとオブジェクト メソッドを作成するいくつかの方法の詳細な説明

この記事は、JS レッドブックの第 8 章に記載されているオブジェクトに関する 2 番目の記事です。...

フォーム OnSubmit と input type=image の使用の概要

ここに <input type="image"> がある場合、この画...

Python ベースの MySQL レプリケーション ツールの詳細な説明

目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...

Element-uiはテーブル内のセルを直接クリックして編集します

目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...

タグが新しいページを開くかどうかという問題。主要ウェブサイトの開設状況をまとめました

a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...

Nginx+Tomcat 負荷分散クラスタのインストールと構成のケースの詳細な説明

目次序文1. Nginx+Tomcat 2. Nginxサーバーを構成する3. Tomcatアプリケ...

サーバー同時実行数の推定式と計算方法

最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...

Windows 8.1 で MySQL5.7 のルート パスワードを忘れた場合の解決方法

【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...

Vue ユニットテストに関する予備調査

目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...

explainコマンドがMySQLデータを変更する理由

クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...

MySQL ルートパスワードを変更する複数の方法 (推奨)

方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...

JavaScript配列の一般的なメソッドの概要

目次1. JavaScriptで配列を作成する方法2. 配列メソッドの概要3. 方法の詳細な説明1....

Javascriptのクロージャとアプリケーションの詳細な説明

目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...

MySQL Server 8.0.13.0 インストールチュートリアル(画像とテキスト付き)

MySQL 6.1.3 をベースにした 8.0.13 をインストールします。 MySQL 8.0....