javascript 隐藏/显示指定的区域附HTML元素【legend】用法


Posted in Javascript onMarch 05, 2010

javascript code:
代码

function expandOther(el, el2) { 
whichEl = document.getElementById(el) 
button = document.getElementById(el2) 
if (whichEl.style.display == 'none') { 
whichEl.style.display = ''; 
button.value = "?藏"; 
} 
else { 
whichEl.style.display = 'none'; 
button.value = "?示"; 
}

expandOther(e1,el2),
e1参数可以指定需要操作的事件对象,比如一个ID为inputshowData的Input按钮,
el2参数可以指定需要隐藏的一个区域,可以是TABLE,div等。
<input name="inputshowData" id="inputshowData" value="?藏" type="button" onclick="expandOther('datadiv','inputshowData')" />
id为datadiv 数据显示层区域
id为inputshowData 操作按钮
HTML示例CODE:
<fieldset> 
<legend> 
<input name="inputshowData" id="inputshowData" value="?藏" type="button" onclick="expandOther('datadiv','inputshowData')" /></legend> 
<div id="datadiv" style="width: 400PX; height: 100px; overflow: auto;"> 
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"> 
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> 
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> 
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> 
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
<EditRowStyle BackColor="#999999" /> 
<AlternatingRowStyle BackColor="White" ForeColor="#284775" /> 
</asp:GridView> 
</div> 
</fieldset>

是不是发现很简单呢?
个人觉得。
不过这个层有滚动条,主要是基于style属性overflow:auto;和有指定的宽度和高度。
如果不直接指定宽度,那以浏览器的宽度为标准显示滚动条,
如果没有指定高度,则不会显示向下的滚动条,似乎是这样。俺对美工不咋的。今天权当记录在这里,以后可以回头看看当时自己是怎么个理解和写的代码。
Javascript 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 #Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 #Javascript
javascript 浏览器检测代码精简版
Mar 04 #Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 #Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 #Javascript
jquery 打开窗口返回值实现代码
Mar 04 #Javascript
jQuery入门知识简介
Mar 04 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
PHP实现把数字ID转字母ID
2013/08/12 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
js实现缓动动画
2020/11/25 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python调用java的jar包方法
2018/12/15 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
Python实现对adb命令封装
2020/03/06 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
超市中秋节活动方案
2014/02/12 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
青年文明号汇报材料
2014/12/23 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
创业计划书之美容店
2019/09/16 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python