请尽可能多的方法简述如何实现以下JS效果“一张网页上有一个按钮点击按钮,点击它不刷新网页,”

请尽可能多的方法简述如何实现以下JS效果“一张网页上有一个按钮点击按钮,点击它不刷新网页,并且在按钮下显示一张图片,再次点击该按钮,隐藏该图片,同样不刷新网页”... 请尽可能多的方法简述如何实现以下JS效果“一张网页上有一个按钮点击按钮,点击它不刷新网页,并且在按钮下显示一张图片,再次点击该按钮,隐藏该图片,同样不刷新网页” 展开
 我来答
BUG集散地
2016-05-31 · TA获得超过1317个赞
知道小有建树答主
回答量:625
采纳率:80%
帮助的人:287万
展开全部

//不刷新网页,那么只能操作DOM和样式了

<html>
    <body>
        <button onclick="togglePic()">图片显示隐藏切换</button>
        <div id="imgDiv">
            <img id="img" src="1.jpg" />
        </div>
    </body>
</html>
<script type="text/javascript">
    //样式操作
    var fn1 = function(){
        var imgObj = document.getElementById("img");
        var s = imgObj.style.display;
        if(s != 'none'){
            imgObj.style.display = 'none';    
        }else{
            imgObj.style.display = 'block';
        }
    }
    //操作DOM
    var fn2 = function(){
        var divObj = document.getElementById('imgDiv');
        var h = divObj.innerHTML;
        if(h != ''){
            divObj.innerHTML = '';
        }else{
            divObj.innerHTML = '<img id="img" src="1.jpg" />';
        }
    }
    //调用
    var togglePic = function(){
        fn1();
    }
</script>
//以上为原生JS操作,jquery也可以实现。
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式