js图片显示隐藏

时间:2022-08-28 19:33:56

js图片显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js图片显示隐藏</title>
    <script>
        window.onload = function () {
            //获取按钮
            var btn = document.getElementsByTagName("input")[0];
            //获取图片
            var img = document.getElementsByTagName("img")[0];
            //给按钮添加事件
            btn.onclick = function () {
                //点击按钮隐藏图片 或者显示图片
                //改变按钮的文字
                //如果是隐藏,就改成显示,如果是显示就改成隐藏
                //图片的处理 :如果按钮文字是显示,图片显示出来,否则隐藏
                if (btn.value == "显示"){
                    btn.value = "隐藏";
                    img.style.display = "block";
                }else {
                    btn.value = "显示";
                    img.style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
    <img src="image/0.jpg"/>
    <br/>
    <input type="button" value="隐藏"/>
</body>
</html>