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 相关文章推荐
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
js取整数、取余数的方法
May 11 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
vue路由中前进后退的一些事儿
May 18 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 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/10/28 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
js实现简单模态框实例
2018/11/16 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
python实现网站的模拟登录
2016/01/04 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
详解python多线程之间的同步(一)
2019/04/03 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
python3中for循环踩过的坑记录
2020/12/14 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
2014厂务公开实施方案
2014/02/17 职场文书
元旦联欢会感言
2014/03/04 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android