简单js控制div的显示与隐藏

最新推荐文章于 2024-06-28 22:39:15 发布

冰蒂

最新推荐文章于 2024-06-28 22:39:15 发布

阅读量5.9w

点赞数 3

分类专栏： Js&&jQuery 文章标签： js 显示与隐藏简单案例

本文链接：https://blog.csdn.net/Dunhuang_Hyoutei/article/details/56840635

版权

Js&&jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这样的例子有很多；但是这个最简单最容易理解；
以下两个页面代码粘贴复制就可以看效果，拿去玩吧！

1. div初始隐藏页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单的js点击隐藏和展开div层效果</title>
</head>

<body>


<div id="box" style="border:1px solid #000; height:300px;          width:300px;display:none" ></div>

<input name="" type="button"  value="点击显示"  id="btn" onclick="btn()"  style="position:absolute; left:320px; top:10px;">


</body>
<script type="text/javascript">
var btn1=document.getElementById('btn');
var box1=document.getElementById('box');
function btn(){ if(btn1.value=="点击隐藏"){box1.style.display='none';btn1.value="点击显示";
 }else{box1.style.display='';btn1.value="点击隐藏";
}
}
</script>
</html>

2. div初始显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单的js点击隐藏和展开div层效果</title>
</head>
<body>
<div id="box" style="border:1px solid #000; height:300px; width:300px" ></div>
<input name="" type="button"  value="点击隐藏"  id="btn" onclick="btn()"  style="position:absolute; left:320px; top:10px;">
</body>
<script type="text/javascript">
var btn1=document.getElementById('btn');
var box1=document.getElementById('box');
function btn(){ if(btn1.value=="点击隐藏"){box1.style.display='none';btn1.value="点击显示";
 }else{box1.style.display='';btn1.value="点击隐藏";
}
}
</script>
</html>

总结：就是根据button的值改变div特性样式style=“display:none”

冰蒂

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
简单js控制div的显示与隐藏

这样的例子有很多；但是这个最简单最容易理解；以下两个页面代码粘贴复制就可以看效果，拿去玩吧！1. div初始隐藏页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/
复制链接

扫一扫

专栏目录