点击按钮显示或隐藏图片

Posted super.hill

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击按钮显示或隐藏图片相关的知识，希望对你有一定的参考价值。

 

jquery的show/hide可以

或者jquery中的toggleClass（）方法
<!DOCTYPE html>
<html lang="en">
　　<head>
　　<meta charset="UTF-8">
　　<title>点击显示或隐藏图片</title>
　　<style>
    .show{
    　　display: block;
    }
    .hidden{
    　　display: none;
    }
　　</style>
</head>
<body>
　　<button>change</button>
　　　　<img class="show" src="https://static.cnblogs.com/images/adminlogo.gif" alt="博客园">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
　　<script>

　　//jquery 中直接切换className

　　// $(\'button\').click(function(){
　　// 　　    $(\'img\').toggleClass(\'hidden\');
　　// })

　　//原生js
　　var btn = document.getElementsByTagName(\'button\')[0];
　　var img = document.getElementsByTagName(\'img\')[0];

　　btn.onclick = function(){
　　　　if(img.className == "show" ){
　　　　　　img.className = "hiden";
　　　　}else{
　　　　　　img.className=\'show\';
　　　　}
　　}
　　</script>
</body>
</html>

 

以上是关于点击按钮显示或隐藏图片的主要内容，如果未能解决你的问题，请参考以下文章

当我尝试在片段中显示或隐藏浮动操作按钮时出错

JavaFX自定义窗口标题栏

用js或jquery实现点击按钮另存为图片的事件

点击按钮显示和隐藏图片精简方法

隐藏按钮直到选择图片

jquery怎么实现点击一个按钮控制一个div的显示和隐藏