`

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另一个显示隐藏 多个DIV并存

    在这个特定的主题中,“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果:当鼠标悬停在一个div上时,另一个关联的div会显示出来,同时其他无关的div保持隐藏状态。这种效果在创建导航...

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

    二、CSS控制显示隐藏的具体方法 在前端开发中,我们可以通过CSS属性直接控制元素的显示和隐藏,也可以通过JavaScript来动态控制。 1. CSS直接控制: 可以直接在CSS样式表中为元素添加display或visibility属性来控制...

    JS实现各种动态显示隐藏div效果

    总结起来,JS结合CSS提供了丰富的可能性来实现div的动态显示隐藏效果。通过巧妙地控制时间和动画曲线,可以创建出各种吸引人的用户界面。实践中,还可以结合CSS3的`animation`属性和JS的事件监听来实现更复杂的交互...

    js实现多div的显示和隐藏

    在网页设计中,我们经常需要控制多个div(文档对象模型中的一个元素)的显示和隐藏,以实现诸如选项卡、轮播图等效果。本文将详细讨论如何使用JavaScript实现多div的显示和隐藏,以及如何创建简单的选项卡功能。 ...

    Div显示与隐藏网页制作

    在"Div显示与隐藏网页制作"这个主题中,我们将探讨如何利用`Div`实现网页元素的动态显示和隐藏,这对于创建交互式和响应式的网页至关重要。 在网页设计中,有时我们需要根据用户的行为或者特定条件来控制某些内容的...

    网页设计div的显示和隐藏

    本文将详细介绍如何通过CSS属性(如`visibility`和`display`)以及JavaScript来实现div的显示与隐藏功能。 #### 一、CSS中的visibility属性 `visibility`属性用于控制元素的可见性,主要分为以下几种状态: 1. **...

    div显示隐藏效果

    总之,`div`的显示隐藏效果是前端开发中的基本技巧,它涉及到HTML、CSS和JavaScript的综合运用。掌握这一技能可以帮助开发者更好地控制网页的交互性和用户体验。通过不断学习和实践,你可以创造出更多富有创意的显示...

    JS +CSS+DIV 拖攥 模块显示隐藏 换肤

    在模块显示隐藏中,JS 可以通过修改元素的`display`属性(如切换 between `none` 和 `block`)来控制元素的可见性。在换肤功能中,JS 可能用于加载不同的CSS文件或者修改元素的样式来改变整体外观。 **CSS (层叠...

    CSS+JS实现DIV蒙板效果

    在网页设计中,CSS(Cascading Style Sheets)和JavaScript(JS)经常被用来实现各种交互效果,其中就包括创建DIV蒙板效果。一个DIV蒙板通常是指在页面上覆盖一层半透明或全黑的层,用于遮挡背景内容,突出显示特定...

    Div+CSS层完美实现拖拽特效

    首先,要实现Div的拖拽功能,我们需要创建一个可拖动的Div元素,并为其添加CSS样式,使其看起来像一个独立的层。这通常包括设置边框、背景色、透明度等属性,以及通过`position: absolute`或`position: fixed`来让该...

    js控制层和DIV+CSS实现TAB菜单

    在网页设计中,"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合,用于创建交互式的用户界面。这个主题涉及到JavaScript(JS)、层(Layer)管理、Div(CSS布局元素)以及CSS(级联样式表)的使用。下面我们将...

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

    在JavaScript中,显示和隐藏`div`元素是前端开发中常见的需求。本篇文章将汇总15种不同的方法来实现这一功能。以下是对这些方法的详细解释: 1. **`display: block/none`**: - `display: block`使元素呈现在页面...

    css + div 滑动弹出div效果

    例如,当一个div从隐藏变为显示时,可以通过添加或改变其高度、宽度、透明度等属性来实现滑动效果。下面是一个简单的例子: ```css #myDiv { width: 0; height: 0; opacity: 0; transition: all 0.5s ease; /* ...

    Div显示隐藏

    总的来说,`div` 显示隐藏是网页动态效果的基础,结合 CSS 的伪类和选择器,我们可以实现丰富的用户交互。通过熟练掌握这些技巧,开发者可以构建出更直观、更易用的网页界面。在实际项目中,还可以考虑使用 ...

    ajax控制div窗口显示和隐藏

    三、Ajax控制Div显示 要使用Ajax来控制div的显示,首先需要在JavaScript中创建一个Ajax请求。在接收到服务器响应后,根据返回的数据决定是否显示或隐藏特定的div。例如,服务器可能返回一个JSON对象,其中包含一个...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式,使网页滚动条与整体设计更加协调一致。 首先,我们需要了解HTML5中引入的`overflow`属性,这是控制内容是否显示滚动条的关键。`overflow`...

    左侧隐藏div,点击按钮弹出

    此外,标签中的“点击按钮”和“弹出隐藏div”强调了交互行为,这在现代Web开发中是非常重要的一部分,因为它们能提高用户的参与度和满意度。 压缩包中的`jquery.validate.pack.js`可能用于表单验证,例如在用户...

    div css移动鼠标改变样式弹出div层

    在网页设计中,`div` 和 `css` 是不可或缺的核心元素。`div` 是一个HTML(超文本标记语言)的块级元素,常用于组织页面布局,而`css`(层叠样式表)则用于控制网页的样式和布局。本话题主要探讨如何利用 `div` 和 `...

    css+div 经典问题

    在布局变化时,如元素的显示和隐藏,可以使用动画效果使其更自然。 4. 事件监听:jQuery提供了丰富的事件处理函数,如`.click()`, `.mouseover()`, `.mouseout()`等,可以响应用户的交互行为,实现动态响应的布局。...

Global site tag (gtag.js) - Google Analytics