`
streamfly
  • 浏览: 89403 次
社区版块
存档分类
最新评论

Div 可见与不可见的两种方法

    博客分类:
  • js
阅读更多

主要是display 和 visibility 属性

 见下面的代码:

js 代码
  1.   
  2.   
  3. "显示第一个层" onclick="showfistDiv();">   
  4. "显示第二个层" onclick="showsecDiv();">   
  5. "border:1px solid #000;display:none">www.eudown.com
  6. "border:1px solid #000;visibility:hidden">www.78land.com
      
  7.   
  8. <script language=< span="">"javascript">   
  9.   var b = new Object();   
  10.   b = document.getElementById("fly");   
  11.      
  12.   var c = new Object();   
  13.   c = document.getElementById("fine");   
  14.   
  15.   function showfistDiv() {   
  16.    b.style.display="";   
  17.   }   
  18.   function showsecDiv() {   
  19.    c.style.visibility="visible";   
  20.   }   
  21. </script>  
  22.   

  

附加:2007-04-28

visibility  属性在设置为 hidden  时 ,在页面上并不释放 对象的空间

display  属性 设置为 none 时 则释放空间,这个特性在用在 对象(如:div)无限级 递归 上 很有用。

笔者最近在做无限级动态树的时候,用的纯div 实现,就遇到了上面的问题。起初采用的visibility 属性,结果树的兄弟节点之间

会随着相应子节点的增加,间距变大!! 

分享到:
评论

相关推荐

    外部DIV如何强制宽度不被内部DIV撑开

    这两种方法各有优缺点:`hidden`简单明了,但可能隐藏掉重要的内容;`auto`则提供了一种更加用户友好的方式来处理溢出内容。根据具体的设计需求和用户体验考虑,开发者可以选择最合适的方案来实施。掌握这些技巧,...

    layer和div两种弹出层.zip

    本压缩包包含两种实现弹出层的方法:Layer弹出层和简单的Div弹窗,这两种方法各有特点和适用场景。 1. Layer弹出层: Layer是一种流行的JavaScript插件,它提供了丰富的弹出层功能,如警告、提示、对话框、加载效果...

    Div显示与隐藏网页制作

    我们可以使用JavaScript或jQuery来实现这一功能,这两种技术都非常适合处理DOM(文档对象模型)中的元素操作。 1. **JavaScript显示和隐藏Div**: - `style.display`属性:通过改变`Div`的`display`属性值,我们...

    使用jQuery判断Div是否在可视区域的方法 判断div是否可见

    反之,`is(":visible")` 返回 `true` 表示Div可见。点击文本 "刷新测试" 不会改变 `#test` 的状态,但你可以通过修改样式或JavaScript来动态改变其隐藏或显示状态,并再次检查这两个表达式的结果。 总的来说,通过...

    闪烁的div、高亮的div层

    这段代码会创建一个让div元素在可见与半透明之间循环变化的闪烁效果。 三、高亮效果 高亮效果通常是指改变元素的背景色、边框或文字颜色以吸引用户注意。在CSS中,可以使用`background-color`、`border`和`color`...

    淘宝SDK模块代码 几个DIV+CSS优化方法

    8. **避免浮动**:过度依赖浮动布局可能导致布局问题,可以考虑使用Flexbox或Grid布局来代替,这两种现代布局方式更为强大且灵活。 9. **合理的层叠上下文**:避免过多的`z-index`,合理规划层叠顺序,可以减少渲染...

    ASPnet(C#)中的DIV的显示隐藏问题

    在ASP.NET中,默认情况下并不支持直接操作HTML的`&lt;div&gt;`标签的可见性属性。这主要是因为ASP.NET提供了一套自己的服务器控件体系,这些控件可以更好地与ASP.NET框架集成,提供更强的功能和更方便的管理方式。其中,`...

    隐藏网页中的层DIV的技巧

    本文将深入探讨如何使用 CSS 和 JavaScript 来隐藏网页中的层(Layer)——通常指的是 `div` 元素,以及这两种方法在实际应用中的差异。 首先,我们来看 `visibility` 属性。`visibility` 属性用于控制元素是否可见...

    纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存

    要实现这个效果,我们可以创建两个相关的div,一个初始为可见,另一个初始为隐藏。以下是一个简单的示例: ```html &lt;div class="container"&gt; &lt;div class="show-on-hover"&gt;鼠标悬停我&lt;/div&gt; &lt;div class="hidden-...

    div+css手册

    这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者理解和掌握如何通过这两种技术构建高效、灵活且美观的网页布局。 `div`元素,全称是division,是HTML中的一个块级元素,通常...

    DIV模仿下拉菜单

    在网页设计中,"DIV模仿下拉菜单"是一种常见的交互元素,它利用HTML的`&lt;div&gt;`元素和JavaScript(通常配合jQuery库)来模拟传统的HTML`&lt;select&gt;`下拉菜单的功能,同时提供更加灵活的样式控制和用户体验。下面将详细...

    网页制作基础之AP DIV元素 旧本适用PPT学习教案.pptx

    1. 溢出可见性:AP DIV 元素可以设置溢出可见性,使得超出 DIV 元素大小的内容不可见。 2. 裁切显示:AP DIV 元素可以设置裁切显示,使得超出 DIV 元素大小的内容被裁切。 AP DIV 元素的嵌套是指一个 AP 元素的代码...

    左右切换div内容

    标题中的“左右切换div内容”指的是在网页设计中实现一种交互式效果,用户可以通过点击或滑动在两个或多个div(HTML文档中的分区元素)之间进行切换,通常用于展示不同的内容区块,如产品介绍、图片轮播或者文章列表...

    点击div部分区域选中整个元素

    有两种方式可以实现选中效果: - 对于文本内容,可以使用 `window.getSelection()` 和 `Range` API 创建一个新的选择范围,然后将这个范围设置为当前选区。例如: ```javascript var selection = window....

    divcss隐藏内容样式方法PPT学习教案.pptx

    这两种方法都有其应用场景,例如,display:none; 可用于创建交互式的隐藏/显示功能,而overflow:hidden; 通常用于管理容器元素的尺寸和可见内容范围。 总结来说,这个PPT学习教案详细介绍了CSS中隐藏内容的几种方法...

    div左右滑动demo

    在前端开发中,"div左右滑动demo"是一种常见的交互设计,主要用于实现界面元素的动态展示,例如在登录和注册页面之间切换。这种效果能够提供更流畅的用户体验,让用户感受到现代且直观的操作流程。以下是对这个知识...

    点击页面其它地方隐藏该div的两种思路

    在事件处理程序中,我们将div设置为不可见(通过修改CSS的display属性)。但同时,我们需要确保当用户点击div本身或其内部的元素时,div不会被隐藏。为此,我们需要阻止事件冒泡。在jQuery中,可以使用`event....

    精通div+css网页样式与网页布局

    这种方法适用于个别特殊情况下的快速样式调整,但不推荐作为主要的样式管理方法。 ```html ; margin-right: 0.5in;"&gt;一段文本 ``` 4. **CSS语法(CSS Syntax)**: CSS的基本语法结构为`Selector { property: ...

    android 实现div隐藏与屏幕动画效果

    首先,`ViewStub`是Android提供的一种轻量级组件,主要用于延迟加载视图。当`ViewStub`被设置为可见或其父视图加载时,它会加载指定的布局资源,并将其插入到当前视图树中。这在处理大而复杂的布局时非常有用,可以...

    设置一个DIV块固定在屏幕中央的两种方法(推荐)

    本篇内容将介绍两种常见的方法来实现DIV块在屏幕中央的固定。 首先,我们来看第一种方法。这种方法主要利用CSS中的定位属性(position)来实现固定位置,接着通过设置四个方向(top, left, right, bottom)的值为0...

Global site tag (gtag.js) - Google Analytics