javascript 隐藏/显示指定的区域附HTML元素【legend】用法

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;和有指定的宽度和高度。
如果不直接指定宽度，那以浏览器的宽度为标准显示滚动条，
如果没有指定高度，则不会显示向下的滚动条，似乎是这样。俺对美工不咋的。今天权当记录在这里，以后可以回头看看当时自己是怎么个理解和写的代码。

赞 (0)

相关推荐

  • JS实现隐藏同级元素后只显示JS文件内容的方法

    JS实现隐藏同级元素后只显示JS文件内容的方法

    本文实例讲述了JS实现隐藏同级元素后只显示JS文件内容的方法.分享给大家供大家参考,具体如下: 这里的demo.html文件在打开后会短暂显示与js文件同级的元素后马上隐藏这些元素,并显示同级的demo.js文件内容.具体代码如下: demo.html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title><

  • javascript 控制 html元素 显示/隐藏实现代码

    1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

  • AngularJS实现元素显示和隐藏的几个案例

    AngularJS实现元素显示和隐藏的几个案例

    案例一:控制html元素显示和隐藏有n种方法:html的hidden.css的display.jquery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 看代码: <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8&qu

  • JS加jquery简单实现标签元素的显示或隐藏

    显示: 复制代码 代码如下: var ul = document.getElementById("opinionSelect"); ul.style.display = 'block'; 隐藏:$("#opinionSelect").fadeOut("fast");

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

  • JS实现随页面滚动显示/隐藏窗口固定位置元素

    JS实现随页面滚动显示/隐藏窗口固定位置元素

    窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel

  • javascript 隐藏/显示指定的区域附HTML元素【legend】用法

    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.s

  • javascript 极速 隐藏/显示万行表格列只需 60毫秒

    隐藏表格列,最常见的是如下方式: 复制代码 代码如下: td.style.display = "none"; 这种方式的效率极低.例如,隐藏一个千行表格的某列,在我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间,令人无法忍受.例如如下代码: 复制代码 代码如下: <body> <input type=button onclick=hideCol(1) value='隐藏第 2 列'> <input type=button on

  • JavaScript打印网页指定区域的例子

    JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.document.write()将指定div区域的内容写入新窗口文档,document.close()关闭文档,使用window.print()调用打印机打印当前文档. JavaScript打印函数myPrint(obj): 复制代码 代码如下: function myPrint(obj){    //打开一个新窗口newWindow    var new

  • Javascript客户端将指定区域导出到Word、Excel的代码

    复制代码 代码如下: <table id = "PrintA" width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor = "#61FF13"> <TR style="text-align : center;"> <TD>单元格A</TD> <

  • 点击显示指定元素隐藏其他同辈元素的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript实现显示和隐藏div方法汇总

    javascript实现显示和隐藏div方法汇总 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> <script src="js/base.js"></script> <style> body{ mar

  • JavaScript实现显示和隐藏图片

    JavaScript实现显示和隐藏图片

    JavaScript之显示和隐藏图片,供大家参考,具体内容如下 点击按钮可以显示和隐藏图片(默认显示),附上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示和隐藏图片</title> </head> <body> <button id="btn"

  • JavaScript实现显示隐藏表单文字

    JavaScript实现显示隐藏表单文字

    本文实例为大家分享了JavaScript实现显示隐藏表单文字的具体代码,供大家参考,具体内容如下 实现思路 运用 onfocus.onblur 事件 onfocus- - -获取焦点(鼠标点击输入框,输入框里面有闪动的光标) onblur- - -失去焦点(鼠标不选中输入框,输入框里面失去闪动的光标) 1.给输入框设置一个默认值 2.获取输入框对象,给其绑定事件:onfocus 和 onblur 当获取焦点时(onfocus)- - -判断输入框的value值是否是默认值,如果是默认值初始值,将

  • 基于JavaScript实现添加到购物车效果附源码下载

    基于JavaScript实现添加到购物车效果附源码下载

    我们有很多种方法实现将商品添加到购物车,通常的做法是点击"添加到购物车"按钮,会跳转到购物车,在购物车里可以点击"结算"按钮进行结算.而今天我给大家介绍一个更友好的解决方案. 查看演示 下载源码 默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作.用户也可以暂时关闭购物车继续购物. HTML结构

  • Android编程之软键盘的隐藏显示实例详解

    本文实例分析了Android编程之软键盘的隐藏显示方法.分享给大家供大家参考,具体如下: Android是一个针对触摸屏专门设计的操作系统,当点击编辑框,系统自动为用户弹出软键盘,以便用户进行输入. 那么,弹出软键盘后必然会造成原有布局高度的减少,那么系统应该如何来处理布局的减少?我们能否在应用程序中进行自定义的控制?这些是本文要讨论的重点. 一.软键盘显示的原理 软件盘的本质是什么?软键盘其实是一个Dialog! InputMethodService为我们的输入法创建了一个Dialog,并且将

随机推荐