js實現點擊隱藏圖片

本文轉載自查看原文 2019-05-15 20:05 1430 dom/ js/ javascript

方法一：

把圖片的display設為none，觸發點擊事件時，display變為block

<style>
    img {
        width: 400px;height: 300px;
        display: none;
    }
</style>
<body>
    <input id = "btn" type="button" value="clickme">
    <img src="images/1.jpg" id="pic"> 
    
    <script>
    var btn = document.getElementById("btn");
    var pic = document.getElementById("pic");
    btn.onclick= function (){
        pic.style.display = "block";
    }
    </script>

方法二：

在html中不加圖片，js觸發點擊事件時添加圖片

<style>
    input{
        display: block;
    }
</style>
<body>
    <input id = "btn" type="button" value="clickme">
    <img src="" id="pic"> 

    <script>
    var btn = document.getElementById("btn");
    var pic = document.getElementById("pic");
    btn.onclick= function (){
        pic.src="images/1.jpg";
        pic.style.width="400px";
        pic.style.height="300px";
    }
    </script>

方法三：

更換class名，先給img用使圖片隱藏的樣式，觸發點擊事件，更換為顯示圖片的屬性。

<style>
    input{
        display: block;
    }
    .pic{
        width: 400px;
        height: 300px;
        display: block;
    }
    .hide{
        width: 400px;height: 300px;
        display: none;
    }
</style>
<body>
    <input id = "btn" type="button" value="clickme">
    <img src="images/1.jpg" id="pic" class="hide" class="pic" > 

    <script>
    var btn = document.getElementById("btn");
    var pic = document.getElementById("pic");
    btn.onclick=function(){
        pic.className="pic";
    }
    </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS實現圖片的彈出和隱藏 js如何實現點擊顯示和隱藏表格 JS原生隱藏顯示圖片,點擊切換圖片的效果 JS實現點擊查看密碼功能，再次點擊隱藏密碼！ js實現點擊圖片，然后圖片放大 js點擊顯示隱藏 JS實現點擊參數面板按鈕顯示或隱藏數據 js實現輸入密碼之延遲星號和點擊按鈕顯示或隱藏 js實現點擊div以外區域，隱藏div區域 js實現的點擊div區域外隱藏div區域