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 常用功能总结
Mar 18 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
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单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP线程的内存回收问题
2016/07/08 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Python单元测试与测试用例简析
2019/11/09 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
Python 存取npy格式数据实例
2020/07/01 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
货代行业个人求职简历的自我评价
2013/10/22 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
个人年终总结怎么写
2015/03/09 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书