JavaScript實(shí)現(xiàn)顯示和隱藏圖片
更新時(shí)間：2021年04月29日 14:37:38 作者：知識(shí)進(jìn)腦的肖老千啊
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)顯示和隱藏圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
JavaScript之顯示和隱藏圖片，供大家參考，具體內(nèi)容如下
點(diǎn)擊按鈕可以顯示和隱藏圖片（默認(rèn)顯示），附上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顯示和隱藏圖片</title>
</head>
<body>
<button id="btn">隱藏</button>
<br>
<img src="img/image01.jfif" id="newGirlFriend">
<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.事件驅(qū)動(dòng)程序
newImg.style.display = 'none';
obtn.innerHTML = "顯示"; //
// isShow = false; //方法2
}else {
newImg.style.display = 'block';
obtn.innerHTML = "隱藏";
// isShow = true; //方法2
}
}
</script>
</body>
</html>
有兩種實(shí)現(xiàn)方法，實(shí)現(xiàn)情況如下：
這是默認(rèn)顯示界面，點(diǎn)擊隱藏后，會(huì)這樣：
簡(jiǎn)單的顯示和隱藏圖片功能就實(shí)現(xiàn)啦！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap基本組件學(xué)習(xí)筆記之按鈕組(8)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之按鈕組,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了javascript函數(shù)中with,with函數(shù)方便用來(lái)引用某個(gè)對(duì)象中已有的屬性，但是不能用來(lái)給對(duì)象添加屬性，要給對(duì)象創(chuàng)建新的屬性，下面通過代碼給大家講解，需要的朋友可以參考下2018-10-10
Bootstrap Table快速完美搭建后臺(tái)管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Bootstrap Table快速完美搭建后臺(tái)管理系統(tǒng)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
基于html+css+js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器代碼實(shí)例
這篇文章主要介紹了基于html+css+js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序單選框組應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
我們可以將call和apply看做是某個(gè)對(duì)象的方法，通過調(diào)用方法的形式來(lái)間接調(diào)用函數(shù)2013-09-09
uniapp組件傳值的方法(父?jìng)髯?子傳父,對(duì)象傳值)實(shí)戰(zhàn)案例
現(xiàn)在的前端開發(fā)中基本上都是組件化開發(fā)的,下面這篇文章主要給大家介紹了關(guān)于uniapp組件傳值(父?jìng)髯?子傳父,對(duì)象傳值)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
原生js實(shí)現(xiàn)表單的正則驗(yàn)證（驗(yàn)證通過后才可提交）
這篇文章主要給大家介紹了關(guān)于如何利用原生js實(shí)現(xiàn)表單的正則驗(yàn)證，所有驗(yàn)證都通過后提交按鈕才可用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
SelectPage v2.4 發(fā)布新增純下拉列表和關(guān)閉分頁(yè)功能
下拉分頁(yè)選擇插件 SelectPage v2.4 發(fā)布了，新增純下拉列表和關(guān)閉分頁(yè)功能，下面通過本文給大家啊介紹SelectPage的相關(guān)知識(shí)，感興趣的的朋友一起看看吧2017-09-09
本篇文章主要是對(duì)js根據(jù)日期判斷星座的示例代碼進(jìn)行了介紹，需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2014-01-01