画像を表示したり非表示にしたりするための 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はオンラインでのアナウンスのスクロール効果を実現します
この記事では、オンラインアナウンスのスクロール効果を実現するためのJSの具体的なコードを参考までに共...
Dockerイメージをインポートおよびエクスポートする方法
この記事では、移行、バックアップ、アップグレードなどのシナリオで使用される Docker イメージの...
VMware Workstation 14 Pro は CentOS 7.0 をインストールします
VMware Workstation 14 ProにCentOS 7.0をインストールする具体的な方...
MySQLを使用して列内の異なる値の数をカウントする例
序文この記事で実装されている要件は、実際には非常に一般的です。たとえば、ユーザーが登録したチャネルを...
Javascript で関数のカリー化とデカリー化を実装する方法
関数のカリー化（黒い疑問符の顔）？ ? ?カレー（黒い疑問符の顔）？ ? ?これは完璧な中国語翻訳で...
システムエラー 1067 を解決するための MySQL データベース グリーン バージョンのインストール チュートリアル
ソフトウェアのグリーンバージョンとインストールバージョンの違いは何ですか?通常、ファイルのインストー...
MySQLインデックスが使用されない状況のまとめ
MySQL のインデックスの種類一般的に、次の 4 つのカテゴリに分類できます。通常のインデックス:...
ウェブデザインにおける画像フォーマットとデザインの関係を詳しく説明
なぜこの領域のコンテンツを整理したいのでしょうか。それは、油絵の具とキャンバスを理解する必要があり、...
複数の無関係なテーブルからデータをクエリし、MySQL でページングする方法
MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...
インライン要素スパンの最小高さの定義
span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...
MySQLでテーブルインデックスを構築する方法
目次複数の種類のフィルタリングをサポート複数の範囲のクエリを避ける並べ替えを最適化するインデックスの...
CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法
通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...
MySQL 5.7 のユニオンオール使用法のブラックテクノロジーを 5 分で学ぶ
MySQL 5.6 での union all のパフォーマンスパート 1:MySQL 5.6.25 ...
ウェブデザインにおける2種類のタブアプリケーション
現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...
MySQLビューの原理と使用法の詳細な説明
この記事では、例を使用して MySQL ビューの原理と使用方法を説明します。ご参考までに、詳細は以下...