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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
繁简字转换功能
2006/07/19 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
js实现前面自动补全位数的方法
2018/10/10 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Pytorch释放显存占用方式
2020/01/13 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
是否有自动比较结构的方法
2015/06/03 面试题
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
某公司部分笔试题
2013/11/05 面试题
本科生详细的自我评价
2013/09/19 职场文书
基层党员公开承诺书
2014/05/29 职场文书
青年志愿者活动方案
2014/08/17 职场文书
法人身份证明书
2014/10/08 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书