css中实现div的显示和隐藏

本文介绍了如何使用CSS的visibility和display属性来控制div元素的显示与隐藏。visibility属性可在隐藏元素的同时保留其空间,而display属性则能释放隐藏元素所占的空间。文章详细解释了这两种属性的不同设置选项及其应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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 显示元素(默认值)。

转载于:https://www.cnblogs.com/houxm/archive/2008/12/08/1350037.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值