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替代copy(示例代码)
Nov 27 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
vue props 一次传多个值实例
Jul 22 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
PHP模板引擎SMARTY
2006/10/09 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
js玩一玩WSH吧
2007/02/23 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
java必学必会之static关键字
2015/12/03 Javascript
js的三种继承方式详解
2017/01/21 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python字典底层实现原理详解
2019/12/18 Python
详解python metaclass(元类)
2020/08/13 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
自荐书模板
2013/12/15 职场文书
公益活动邀请函
2014/02/05 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
推荐信格式范文
2014/05/09 职场文书
宣传标语大全
2014/07/01 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
详解Vue的options
2021/05/15 Vue.js
解决Python字典查找报Keyerror的问题
2021/05/26 Python