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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
js+css3实现旋转效果
Jan 20 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
python字符串的常用操作方法小结
2016/05/21 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
结束运行python的方法
2020/06/16 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
中药专业毕业自荐书范文
2014/02/08 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
锦旗赠语
2015/06/23 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
导游词之无锡梅园
2019/11/28 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技