javascript 控制 html元素 显示/隐藏实现代码


Posted in Javascript onSeptember 01, 2009

1。编写js函数
<script type="text/javascript">
function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";}
function $(s){return document.getElementById(s);}
</script>
2. 要显示/隐藏的html元素加上 id 属性
<table>
<tr id="menu" >
<td>控制这个tr的显示/隐藏</td>
</tr>
</table>
3,添加按钮,链接等触发 js 函数
<input type="button" onclick="display('menu')" value="显示/隐藏"/>
<a href="#" onclick="display('menu')" >显示/隐藏</a>
javascript显示隐藏层<div id="layer" style="display:none;">广告</div>
<input type="botton" onclick="display(layer)">
二:javascript控制页面控件隐藏显示的两种方法
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位
方法一:
document.all["PanelSMS"].style.visibility="hidden";
document.all["PanelSMS"].style.visibility="visible";
方法二:
document.all["PanelSMS"].style.display="none";
document.all["PanelSMS"].style.display="inline";
方法一隐藏后 页面的位置还被控件占用 只是不显示
方法二隐藏后 页面的位置不被占用

Javascript 相关文章推荐
js左侧三级菜单导航实例代码
Sep 13 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
js实现动态显示时间效果
Mar 06 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
js实现时间日期校验
May 26 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 #Javascript
JavaScript 继承详解 第一篇
Aug 30 #Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 #Javascript
用cssText批量修改样式
Aug 29 #Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 #Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 #Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 #Javascript
You might like
JpGraph php柱状图使用介绍
2011/08/23 PHP
php之XML转数组函数的详解
2013/06/07 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
家电业务员岗位职责
2014/03/10 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
元旦标语大全
2014/10/09 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
《观察物体》教学反思
2016/02/17 职场文书