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 validate poshytip 自定义样式
Nov 26 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
详解Bootstrap插件
Apr 25 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
如何在Linux上安装Node.js
2016/04/01 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
JS作用域链详解
2017/06/26 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
Python中的pprint折腾记
2015/01/21 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
中软国际Java程序员机试题
2012/08/19 面试题
售后客服工作职责
2014/06/16 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
大学生操行评语大全
2014/12/31 职场文书
倡议书作文
2015/01/19 职场文书
伊索寓言读书笔记
2015/06/30 职场文书