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 photoFrame 图片边框美化显示插件
Jun 28 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
vue组件的写法汇总
Apr 12 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
js实现表格数据搜索
Aug 09 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的优点与缺点
2013/04/11 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python中的二维列表实例详解
2018/06/19 Python
python看某个模块的版本方法
2018/10/16 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
社区工作者感言
2014/03/02 职场文书
表决心的诗句大全
2014/03/11 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
趣味运动会口号
2015/12/24 职场文书