場合によっては、特定の条件に基づいて 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のさまざまな背景、使用シナリオ、テクニックの詳細な分析
Nginxを使用する目的Alibaba Cloud ECS クラウド サーバーを使用して、まずは著者...
この記事は、JS レッドブックの第 8 章に記載されているオブジェクトに関する 2 番目の記事です。...
ここに <input type="image"> がある場合、この画...
目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...
目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...
a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...
目次序文1. Nginx+Tomcat 2. Nginxサーバーを構成する3. Tomcatアプリケ...
最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...
【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...
目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...
クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...
方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...
目次1. JavaScriptで配列を作成する方法2. 配列メソッドの概要3. 方法の詳細な説明1....
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
MySQL 6.1.3 をベースにした 8.0.13 をインストールします。 MySQL 8.0....