JavaScript實現顯示和隱藏圖片

Posted on by

JavaScript之顯示和隱藏圖片，供大傢參考，具體內容如下

點擊按鈕可以顯示和隱藏圖片（默認顯示），附上代碼：

<!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.事件驅動程序
                newImg.style.display = 'none';
                obtn.innerHTML = "顯示";  //
                // isShow = false; //方法2
            }else {
                newImg.style.display = 'block';
                obtn.innerHTML = "隱藏";
                // isShow = true; //方法2
            }
        }

    </script>
</body>
</html>

有兩種實現方法，實現情況如下：

這是默認顯示界面，點擊隱藏後，會這樣：

簡單的顯示和隱藏圖片功能就實現啦！

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：