画像を表示したり非表示にしたりするための 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ファイルをインストールする方法
推薦する
MySQLの分離レベルとロックメカニズムの詳細な説明
目次簡単な説明: 1. 取引の4つの特徴2. 複数の同時トランザクションによって発生する問題3. ト...
この記事ではSQL CASE WHENの使い方を詳しく説明します
目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...
Vue印刷機能を実装する2つの方法の概要
方法1: npm経由でプラグインをインストールする1. npm install vue-print-...
重要なmysqlログファイルの概要
著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...
MySQL 外部キー制約 (FOREIGN KEY) ケースの説明
MySQL 外部キー制約 (FOREIGN KEY) はテーブルの特別なフィールドであり、主キー制約...
ドロップダウンメニューを実現するためのHTML+CSS
1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...
MySQLの高可用性アーキテクチャの詳細な説明
目次導入MySQL 高可用性マスター 1 つとバックアップ 1 つ: MySQL マスター スレーブ...
Dockerでランナーコンテナを構成する方法
1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...
CSS 配置レイアウト (位置、配置レイアウト スキル)
1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...
Linux で完全な Samba サーバーを構築する方法 (CentOS バージョン)
序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...
MySQLデッドロックの原因と解決策
データベースは、オペレーティング システムと同様に、複数のユーザーが使用する共有リソースです。複数の...
Centos8 に nginx1.9.1 をインストールする詳細な手順
1.17.9 本当はもっと美味しいNginx のダウンロード アドレス: https://nginx...
Nginx ベースの HTTPS ウェブサイトを設定する手順
目次序文：暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...
JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?
目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...
CSS @font-face パフォーマンス最適化の詳細な理解
この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と...