表示または可視性によって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の基本的な共通コマンドの概要

推薦する

Linux での Docker と portainer の設定方法

1.Docer CEをインストールして使用するこの記事では、CentOS 7 を例に Docker ...

CentOS 7.2 は uniapp プロジェクトを展開するための nginx Web サーバーを構築します

Pantherは新人としてスタートし、今もまだ新人ですが、人々から学び、学んだことを時々皆さんと共有...

js での遅延読み込みとプリロードの具体的な使用法

遅延読み込み(レイジー読み込み)とプリロードは、Web 最適化によく使用される手段です。 。 1. ...

WeChatアプレットがSMS認証コード送信のカウントダウンを実装

この記事では、WeChatアプレットがSMS認証コードのカウントダウンを送信するための具体的なコード...

MySQL で遅い SQL 文を見つける方法

MySQL で遅い SQL ステートメントを見つけるにはどうすればよいでしょうか?これは、多くの人を...

Linux netstatコマンドの詳細な説明

目次Linux netstat コマンド1. TCP接続ステータスの詳細な説明2. コマンド形式3....

mysql エラー 1033 を解決する方法: ファイル内の情報が正しくありません: 'xxx.frm'

問題の説明1. 収集ステーションのデータベース2. データが無い状態での移動は問題ありませんが、デー...

Chromeの最小フォントサイズ制限12pxに対する最終的な解決策

ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...

iframe ページパラメータの文字化けの問題について議論

非常に珍しいパラメータ文字化けの問題に遭遇しました。まずページを見てみましょう写真に示すように、月次...

シェルスクリプトを使用して CentOS7 に python3.8 環境をインストールする (推奨)

ワンクリック実行仮想マシンに Python 3.8 をインストールするには、ネットワーク アダプター...

MySQL のストレージ エンジンの違いと比較

MyISAM ストレージエンジンMyISAM は ISAM ストレージ エンジンに基づいており、それ...

vmware14Pro で Ubuntu システム インターフェイスが小さすぎる問題の解決方法の詳細な説明

1. 動作環境vmware14proウブントゥ 16.04LTS 2. 問題の説明vmware14P...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...

MySQLはtruncateコマンドを使用してデータベース内のすべてのテーブルを素早くクリアします

1. まずSELECT文を実行して、すべての切り捨て文を生成します。ステートメント形式: selec...

Linuxのip netnsコマンドを使用してネットワークポートを分離し、IPアドレスを設定します。

1. 分離マーカーを追加します。 ip netns add fd 2. 指定されたネットワーク カ...