javascript隐藏和显示元素
2015-12-14 21:15
507 查看
使页面元素隐藏和显示可以有两种方式:
方式一:设置元素style属性中的display
方式二:设置元素style属性中的visibility
这两种方式的区别是:设置display隐藏后不占用原来的位置,而通过visibility进行隐藏后元素位置任然被占用。
效果如下所示:
第一种方式隐藏前
隐藏后不占用原来的位置
第二种方式隐藏前
第二种方式隐藏后,任然占据原来的位置。
完整代码如下:
以上。
方式一:设置元素style属性中的display
[code]var t = document.getElementById('test');//选取id为test的元素 t.style.display = 'none'; // 隐藏选择的元素 t.style.display = 'block'; // 以块级样式显示
方式二:设置元素style属性中的visibility
[code]var t = document.getElementById('test'); t.style.visibility = 'hidden'; // 隐藏元素 t.style.visibility = 'visible'; // 显示元素
这两种方式的区别是:设置display隐藏后不占用原来的位置,而通过visibility进行隐藏后元素位置任然被占用。
效果如下所示:
第一种方式隐藏前
隐藏后不占用原来的位置
第二种方式隐藏前
第二种方式隐藏后,任然占据原来的位置。
完整代码如下:
[code]<head> <script type="text/javascript"> function fn1(){ var t = document.getElementById('test'); if(t.style.display === 'none') { t.style.display = 'block';// 以块级元素显示 } else { t.style.display = 'none'; // 隐藏 } } function fn2(){ var t = document.getElementById('test'); if(t.style.visibility === 'hidden') { t.style.visibility = 'visible'; } else { t.style.visibility = 'hidden'; } } </script> </head> <body> <div id="test" style="border: solid 1px #e81515; width:500px;"> 这是一个将要隐藏的DIV。<br> 这是一个将要隐藏的DIV。<br> 这是一个将要隐藏的DIV。<br> 这是一个将要隐藏的DIV。<br> </div> <button onclick="fn1()">第一种方式</button> <button onclick="fn2()">第二种方式</button> </body>
以上。
相关文章推荐
- [Servlet&JSP] 过滤器的使用
- 【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记
- 【JavaScript】(7)——JavaScript与Ajax交互
- PhantomJS 和Selenium模拟页面js点击
- 【Javascript】二维数组
- 依赖注入的javascript实现
- 用 JavaScript 编写第一个 UWP 应用 - 手机归属地查询
- jSON Call can throw but it is not marked with try
- json处理复杂对象jsonConfig
- javascript发送验证码
- express package.json解析
- 关于js的一些小tip
- XML解析、Json解析
- 使用js Math.random()函数生成n到m间的随机数字
- 如何处理JS与smarty标签的冲突
- 原生态ajax和 ajax的两个框架的 JS实现
- jsp中显示本地图片
- 基于JavaScript 声明全局变量的三种方式详解
- JavaScript计时事件
- js 中{},[]中括号,大括号使用详解