display または visibility を通じて HTML 要素を表示または非表示にする

display または visibility を通じて 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>

<<:  Vueは要素ツリーコントロールを通じてツリーテーブルを実装します

>>:  HTML と CSS の命名規則の概要

推薦する

Vueのウェブページスクリーンショット機能の詳しい説明

最近、プロジェクトで写真をアップロードする要件があるのですが、顧客がアップロードする写真のサイズがま...

Nginx の realip モジュールの使い方の基礎学習

序文nginx モジュールには、公式とサードパーティの 2 種類があります。nginx のインストー...

CentOS IP接続ネットワーク実装プロセス図

1. システムにログインし、ディレクトリに入ります: cd /etc/sysconfig/netwo...

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

Vueのキーボードイベントの詳細な説明

目次共通キーエイリアスエイリアスが指定されていないキーシステム修飾キーカスタムキーエイリアス要約する...

MySQL 5.7.17 でパスワードを忘れた場合の対処方法

1. my.iniファイルにskip-grant-tablesを追加し、MySQLサーバーを再起動し...

適応分析と応答分析の違いを専門用語で詳しく説明

日々の開発経験と関連するオンライン情報に基づいて、アダプティブとレスポンシブの違いをシンプルでわかり...

HTMLコードテキストボックスの制限入力テキストボックスが灰色になり、制限テキストボックスの入力

方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...

WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します

この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...

JavaScript ベースのシンプルな計算機の実装

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

Google の新しい UI から学べること (画像とテキスト)

2011 年に最も顕著なウェブサイトの変更は、一連の製品に新しいユーザー インターフェースを導入した...

JS 関数のアンチシェイクと関数スロットリングを理解する方法

目次概要1. 関数デバウンス2. 機能スロットリング(スロットル)概要関数アンチシェイクと関数スロッ...

HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...

カスタムポップアップボックスを実装するためのJavaScriptシングルトンモード

この記事では、カスタムポップアップボックスを実装するためのJavaScriptシングルトンモードの具...

ボタンをクリックした後のCSS読み込み効果を実現する

自社製品にクリック後1~2秒待機時間があるボタン(確認メールを送信する)があるため、クリック後の1~...