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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 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中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python如何获取服务器硬件信息
2017/05/11 Python
python命令 -u参数用法解析
2019/10/24 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
中学家长会邀请函
2014/01/17 职场文书
采购助理岗位职责
2014/02/16 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
小学教育见习总结
2015/06/23 职场文书
2015年教师节感言
2015/08/03 职场文书