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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP与Java对比学习日期时间函数
2016/07/03 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
angularJS开发注意事项
2018/05/26 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[06:36]吞吞映像top1
2014/06/20 DOTA
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
一个SQL面试题
2014/08/21 面试题
交通安全主题班会
2015/08/12 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫