1. 在隐藏的方法中,display取none值这种方法一般是不可取的!因为display:none是直接不显示,也就是不渲染此元素,如果它所作用的元素排版在页面较前,先渲染,就容易引起回流(reflow)和重绘(repaint),造成难以预知的后果。

display:none;

特点:  不占据空间,不可点击(对鼠标事件无响应)

       株连性:其后代元素一概不渲染

         transition无法对其起作用

2.visibility:元素消失,而后面的div却没有占据它原来的位置,说明元素不可见却仍然占据空间

visibility:hidden;

另外还有一种特殊情况:此时,后面的div占据它原来的位置(元素将脱离文档流,后面的元素就会占据它原本的空间)

visibility:hidden;
position: absolute;// 或fixed; 或float:left/right

特点:占据空间,却不可点击(对鼠标事件无响应)

       有继承性,无株连性,后代元素可以设置visibility:visible来显示自己

       transition对hidden ->  visible无效,对visible -> hidden 有效

3. 设置透明度

opacity:0;

特点:占据空间,可点击(对鼠标事件有响应)

       有继承性,无株连性,后代元素可设置opacity:1或者rgba(n,n,n,1)来显示自己

       transition对其有效

       使用position或float使其脱离文档流后,仍然对鼠标事件响应。

4.overflow:hidden;

<style>
.overflow{
overflow:hidden;
}
.overflow>ul>li{
height:100px;
}
.overflow:hover{
height:200px;
}
</style>
    <div class="overflow">
<ul>
<li>导航一</li>
<li>导航二</li>
<li>导航三</li>
</ul>
</div>
<div class="position">position</div>

特点:由于是溢出,顾名思义,隐藏的部分本来就不占据空间。

   显示可点击(对鼠标事件响应)  

     无继承性,无株连性,只对设置的元素起作用。

     transition对其有效,可做出炫酷的效果哦

   只需要改变元素的height:0px即可起到隐藏的效果

让DOM从页面中消失的方法的更多相关文章

  1. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  2. jQuery 互相调用iframe页面中js的方法

    1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...

  3. javascript 获取父页面中元素对象方法

    父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...

  4. 用juery的ajax方法调用aspx.cs页面中的webmethod方法示例

    juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大 ...

  5. Javscript调用iframe框架页面中函数的方法

    Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...

  6. valuestack,stackContext,ActionContext.之间的关系以及action的数据在页面中取得的方法

     转自:http://blog.csdn.net/quechao123/article/details/4406148 1.三者之间的关系如下图所示: 2.action的数据在页面中取得的方法 在st ...

  7. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  8. 微信小程序——页面中调用组件方法

    我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法. 我们如何在调用组件的页面中调用组件里面的方法呢? 在调用组件的页面写如下代码 ...

  9. JavaScript在页面中的引用方法

    现在前端开发越来越流行,框架也越来越多,像ExtJs.JQuery.Bootstrap等.虽然入行这么多年,但是感觉自己在前端方面还是存在基础不牢的地方,特别是CSS和JS.因此最近打算重新阅读这方面 ...

随机推荐

  1. Windows下用cmd命令实例讲解yii2.0 的控制台定时任务

    Yii中的资源是和Web页面相关的文件,可为CSS文件,JavaScript文件,图片或视频等,资源放在Web可访问的目录下,直接被Web服务器调用. 有时候有些功能需要做到计划任务中去,因此就需要y ...

  2. Solr索引配置

    Solr主配置文件 schema.xml,在SolrCore的conf目录下,它是Solr数据表配置文件,它定义了加入索引的数据的数据类型的.主要包括FieldTypes.Fields和其他的一些缺省 ...

  3. Spring Boot 2 (二):Spring Boot 2 动态 Banner

    Spring Boot 2 (二):Spring Boot 2 动态 Banner Spring Boot 2.0 提供了很多新特性,其中就有一个小彩蛋:动态 Banner. 一.配置依赖 使用 Sp ...

  4. VS 域名绑定IIs 调试

    一排致敬老师傅:https://www.cnblogs.com/woxpp/p/5805624.html 问题: 域名www.jinhuang.com,网站的ip地域跳转出问题,需要测试. ①修改Ho ...

  5. 网络对抗——web基础

    网络对抗--web基础 实践内容 (1)Web前端HTML (2)Web前端javascipt (3)Web后端:MySQL基础:正常安装.启动MySQL,建库.创建用户.修改密码.建表 (4)Web ...

  6. Codeforces 844D Interactive LowerBound - 随机化

    This is an interactive problem. You are given a sorted in increasing order singly linked list. You s ...

  7. jsoup对 HTML 文档的解析和操作

    本文手动转载自http://www.cnblogs.com/chenying99/archive/2013/01/04/2844615.html,仅根据个人需要对实用部分进行转载,详细请阅读原文. j ...

  8. Python3基础 list [] 创建整数列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. 【做题】arc078_f-Mole and Abandoned Mine——状压dp

    题意:给出一个\(n\)个结点的联通无向图,每条边都有边权.令删去一条边的费用为这条边的边权.求最小的费用以删去某些边使得结点\(1\)至结点\(n\)有且只有一条路径. \(n \leq 15\) ...

  10. Many Website Of WallPaper

    我在这里给大家推荐几个不错的壁纸网站 毕竟一张赏心悦目的壁纸能让你的工作效率提高不少 注意前方高能 一大波网站即将来袭 一系列 如你所见 alphacoders wallpaperdj Wallhav ...