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一组验证函数
Dec 20 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
Javascript实现字数统计
2015/07/03 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
python实现目录树生成示例
2014/03/28 Python
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
网络营销策划方案
2014/06/04 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS