`

css中实现div的显示和隐藏

阅读更多
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: 
  style="visibility: none;"
  document.getElementById("typediv1").style.visibility="hidden";//隐藏
  document.getElementById("typediv1").style.visibility="visible";//显示
通过设置display属性可以使div隐藏后释放占用的页面空间,如下
  style="display: none;"
  document.getElementById("typediv1").style.display="none";//隐藏
  document.getElementById("typediv1").style.display="";//显示
特别说明

  display属性设置元素的显示方式,对应脚本特性为display,可选值为none、block和inline,各值的说明如下:
        none 隐藏元素,不保留元素显示时的空间。
        block块方式显示元素。
        inline 以内嵌方式显示元素。
        inline-block对象显示为内嵌元素,但所有子对象都显示为块元素,相邻的内嵌元素将显示在同一行,允许空格。
        list-item 将块元素显示为列表对象,并可以添加项目标点。(需要IE6.0+支持)
        table-header-group 将元素作为表格标题组显示,相当于tHead元素。
        table-footer-group 将元素作为表格脚注组显示,相当于tFoot元素。
  visibility属性设置是否显示元素,对应的脚本特性为visibility,可选值为inherit、hidden和visible,各值的说明如下:
        inherit 继承父元素的visibility属性设置。
        hidden 隐藏元素,但保留其所占空间。
        visible 显示元素(默认值)。
分享到:
评论

相关推荐

    CSS控制DIV层显示和隐藏的实现方法

    本文给大家带来了CSS控制DIV层显示和隐藏的方法,是前端学习必须要掌握的基础知识,非常不错,具有参考借鉴价值,感兴趣的小伙伴一起学习吧

    班车时刻表移动端 实现div点击显示/隐藏.html

    html css 编写的移动端时刻表代码,纵向排列,卡片形式,点击车程在下方显示出详细路线,避免了页面跳转加载缓慢问题,点击一个div显示/隐藏另一个div,排版简洁大方,蓝白配色

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...

    纯css3显示隐藏一个div特效的具体实现

    复制代码代码如下: <!...head> [removed][removed] <style> #showDiv { background-color:red; width:300px; height:300px; display:none; } .from-below, .from-below-to-below .effeckt-modal { -webkit-...

    CSS3实现鼠标悬停显示扩展内容

    我们在做导航标签的时候,有时会出现空间过于拥挤需要隐藏部分内容的情况,所以在这里我自己写了一个鼠标悬停显示扩展内容的效果,如下图所示。  总的来说效果还是比较好实现,但是比较头疼的是三角部分使用了伪...

    纯css3实现鼠标滑过图片显示图文效果

    纯css3实现的鼠标悬停图片后的动画效果 默认文字隐藏在div外部,当鼠标悬停后,图片向上移动 同时显示出底部隐藏的内容 使用方法: 1、将head中的样式复制到你的样式表中 2、将body中的代码...

    纯css3实现鼠标滑过图片显示图文效果.zip

    纯css3实现的鼠标悬停图片后的动画效果,默认文字隐藏在div外部,当鼠标悬停后,图片向上移动,同时显示出底部隐藏的内容

    100多个JQuery效果示例(实例)div+css+javascrpit

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...

    【JavaScript源代码】js实现简易点击切换显示或隐藏.docx

     本文实例为大家分享了js实现简易点击切换显示或隐藏的具体代码,供大家参考,具体内容如下 html:  <div id="header"> 点击切换显示隐藏</p> <div class="close" onclick="closeTask()">关闭</div> </div> ...

    tips帮助提示框,纯css制作

    用纯的css实现div层的隐藏与显示,当鼠标经过某一区域或者Div 或者按钮时隐藏层显示,鼠标离开隐藏层隐藏。

    基于Jquery+div+css实现弹出登录窗口(代码超简单)

    给大家介绍基于jquery div css三者相结合实现弹出登录窗口,实现大致思路是这样的:通过dispaly:none属性先隐藏在显示,感兴趣的朋友一起看看代码实现过程吧

    JS+CSS实现感应鼠标渐变显示DIV层的方法

    主要介绍了JS+CSS实现感应鼠标渐变显示DIV层的方法,涉及javascript对div层的逐渐显示与隐藏的实现技巧,需要的朋友可以参考下

    div+css table布局实现代码

    我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。...

    Div 随便拖拽效果

    用js+ css 实现 Div 随便拖拽 隐藏显示 效果 ,非常的炫

    javascript点击按钮实现隐藏显示切换效果

    在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下: <html> <head> <meta charset=gb2312> <title&gt...

    js实现简易点击切换显示或隐藏

    点击切换显示隐藏 <div class=close xss=removed>关闭</div> </div> <div class=open xss=removed>打开</div> css: * { margin:0; padding:0; } #header { width:100%; height:50px; background-color:...

    div css 实现tabs标签的思路及示例代码

    2、编写被选中的页签和页签内容div显示、隐藏的样式。 3、编写js方法,根据被选中的页签,显示相应的页签内容。 例如: 复制代码代码如下: <!doctype html> <html lang=”zh-cn”> <head> <...

    纯CSS实现图片切换,鼠标切换相结合.rar

    图片自动切换实现原理:使用一个div并设置溢出隐藏来只显示一次一张图片,同时设置另一个div(总图片div),尺寸为所有图片横排的总尺寸宽高,作为动画顺序播放,然后使用css3动画,通过对div(总图片div)进行位移...

Global site tag (gtag.js) - Google Analytics