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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
javascript的BOM
May 03 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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
PHP5 字符串处理函数大全
2010/03/23 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
js数据类型检测总结
2018/08/05 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
python调用API实现智能回复机器人
2018/04/10 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python