画像を表示したり非表示にしたりするための 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ファイルをインストールする方法
推薦する
Webフロントエンド開発経験の概要
XMLファイルは、可能な限りutf-8でエンコードする必要があります。gb2312には、?など、保存...
カラフルな時計効果を実現する JavaScript キャンバス
キャンバスを使ってカラフルな時計を書いてみよう！ 1. タイトル（１）時計のケースが与えられ、ページ...
Js における new 演算子の役割の詳細な説明
序文Js は現在最も一般的に使用されているコード操作言語であり、その中でも new 演算子は特によく...
フォームアクションとonSubmitの例
まず、action はフォームの属性です。HTML5 では必須の属性値として定義されています。onS...
nginx が動的と静的の分離を実装する方法の例
目次server1にnginxをデプロイするサーバーにlnmpを展開するノード3にhttpdをデプロ...
ubuntu20.04 上の CLion2020.1.3 での ROS のインストールと設定の詳細な説明
1. CLionをダウンロード、インストール、アクティベートするオンラインで提供されるチュートリアル...
MySQLでよく使われるSQLとコマンドの入力からデータベースの削除、そして終了まで
目次開始と停止データベース関連の操作データベーステーブル関連の操作制約関連デフォルトの制約高度なデー...
Node.js における npx コマンドの使用法とシナリオ分析
npx 使用チュートリアル今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを...
Vue3は現在のルーティングアドレスを取得します
正解useRouterの使用: // ルーターパス: "/user/:uid" ...
Vue3のいくつかの利点についての簡単な説明
目次1. ソースコード1.1 モノレポ1.2 タイプスクリプト2. パフォーマンス2.1 ソースコー...
HTMLページ内の検索機能を完了する
最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...
フォーム要素とプロンプトテキストが揃っていない問題
最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...
Linux システム ディレクトリ sys、tmp、usr、var の詳細な説明。
Linux 初心者から Linux マスターへの成長の道: Linux システム ディレクトリ s...
Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します
目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...