画像を表示したり非表示にしたりするための JavaScript
|
JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりです。 ボタンをクリックして画像を表示または非表示にします (デフォルトでは表示されます)。コードを添付します:
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>画像の表示と非表示</title>
</head>
<本文>
<button id="btn">非表示</button>
<br>
<img src="img/image01.jfif" id="新しいガールフレンド">
<script type="text/javascript">
// 1. イベント ソースを取得します。var obtn = document.getElementById("btn");
var newImg = document.getElementsByTagName("img")[0];
// var isShow = true; // 方法 2
// 2. イベントのバインド obtn.onclick = function (){
// if (isShow) { // 方法 2
if (obtn.innerHTML === '非表示') {
// 3. イベント ドライバー newImg.style.display = 'none';
obtn.innerHTML = "表示"; //
// isShow = false; // 方法 2
}それ以外 {
newImg.style.display = 'ブロック';
obtn.innerHTML = "非表示";
// isShow = true; // 方法 2
}
}
</スクリプト>
</本文>
</html>実装方法は 2 つあり、実装は次のとおりです。
これはデフォルトの表示インターフェースです。非表示をクリックすると、次のようになります。
写真を表示したり非表示にするシンプルな機能を実現しました！ 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux に MySql 5.7.21 をインストールするための詳細な手順
>>: LinuxシステムにISOファイルをインストールする方法
推薦する
任意の長さの配列を作成または埋めるための JS のヒントの要約
目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...
Dockerのyumソースの設定とCentOS7へのインストールの詳細な説明
ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...
MySQL をデプロイするときに発生する「テーブル mysql.plugin が存在しません」という問題の解決方法
今日、MySQL の無料インストール版をデプロイしたところ、テーブル 'mysql.plug...
WindowsでMysql5.7.17のインストールと起動に失敗する問題を解決する
マシンに初めて MySQL をインストールします。オペレーティングシステムはwin7ですmysqlの...
Net Core実装プロセス分析のDockerインストールと展開
1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...
MySQL でのワイルドカードを使用したファジークエリの実装に関する簡単な説明
MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...
Dell R720 サーバーに Windows Server 2008 R2 をインストールする方法
注: この記事のすべての写真はインターネットから収集されたものであるため、DELL R720 サーバ...
HTMLバージョン宣言DOCTYPEタグ
通常のウェブサイトのソースコードを開くと、ソースコードは<!DOCTYPE htmlで始まる必...
W3C 検証に合格するにはどうすればいいですか?
W3C では、さまざまなタグの規定を設定するだけでなく、Web ページの作成者が実際に W3C 規...
初心者向けウェブサイト構築チュートリアルの概要
これら 6 つの記事を書いた後、私は少し混乱し始めました。次にどこに書けばいいのか分かりません。ドメ...
Linux で文字化けしたファイルや特殊文字のファイルを削除する方法
エンコーディングの理由により、Linux サーバーに中国語のファイルやディレクトリをアップロードまた...
Linux netstatコマンドの詳細な説明
目次Linux netstat コマンド1. TCP接続ステータスの詳細な説明2. コマンド形式3....
高品質なJavaScriptコードの書き方
目次1. 読みやすいコード1. 統一コード形式2. マジックナンバーを削除する3. 単一機能原則2....
LeetCode の SQL 実装 (181. 従業員は管理職よりも収入が高い)
[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...
Vueはアンカー配置機能を実装します
この記事では、アンカー配置を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...