js点击实现显示和隐藏效果

1、html结构

<img src="images/xingxing.jpg" alt="" id="img">

<button id="btn_show" >
        显示
</button>
<button id="btn_hidden">
    隐藏
</button>

2、css样式

    

<style>

    #img{
        width: 500px;
        height: 500px;
        display: block;
    }
    button{
        width: 200px;
        height: 50px;
        border-radius: 10px;
        font-size: 20px;
        margin: 11px;
        background-color:#666666 ;
        color: #ffffff;
    }
</style>

3、js

<script>
    window.onload = function () {
        /* window意思是窗口     onload是加载     意思是页面加载完毕后，才执行里面的js ，所以可以放在顶端*/
        var img = document.getElementById("img");
        /*获取图片img="id"给变量 img*/
        var btn_show = document.getElementById("btn_show");
        /*获取显示按钮id="btn_show"给变量 btn_show*/
        var btn_hidden = document.getElementById("btn_hidden");
        /*获取隐藏按钮id=“btn_show”给变量 btn_hidden */

        btn_show.onclick = function () {
            img.style.display = "block";
        }
        /*点击显示按钮时，img的样式style的display属性赋值为“block”，下同理*/
        btn_hidden.onclick = function () {
            img.style.display = "none";
        }
    }
</script>

4、效果（大爱星爷）