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 apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
单线程JavaScript实现异步过程详解
May 19 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函数)
2006/10/09 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
Vue.js 插件开发详解
2017/03/29 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python编写俄罗斯方块
2020/03/13 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
工程质量承诺书范文
2014/03/27 职场文书
支部书记四风对照材料
2014/08/28 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
小学生手册家长意见
2015/06/03 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
解决vue中provide inject的响应式监听
2022/04/19 Vue.js