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 动态选中下拉框
Nov 26 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP 单引号与双引号的区别
2009/11/24 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
家长对老师的评语
2014/04/18 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers