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 相关文章推荐
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 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将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
Python中文竖排显示的方法
2015/07/28 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
python3 读写文件换行符的方法
2018/04/09 Python
Python整数对象实现原理详解
2019/07/01 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
行政专员岗位职责
2014/01/02 职场文书
初中语文教学反思
2014/02/02 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
材料物理专业求职信
2014/09/01 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
销售2014年度工作总结
2014/12/08 职场文书
同学会感言
2015/07/30 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL