来自 前端知识 2019-11-08 09:12 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

元素的几种方法的对比,弹出框插件

CSS“隐藏”元素的几种方法的对比

2016/02/16 · CSS · 隐藏

原文出处: 狼狼的蓝胖子(@狼狼的蓝胖子)   

一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none。这是最为人所熟知也是最常用的方法。我相信还有不少人想到使用设置visibility为hidden来隐藏元素,这种方式也是常用的方法,而且也有很多人知道两者的不同。除了这两种方法,本文还总结了一些比较不常用的方法,比较了这几种“隐藏”元素方法的区别和优缺点,欢迎大家交流!!

基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器。

几种方法的简单介绍

首先我们分别来说说到底有哪几种隐藏元素的方法,有一些方法是众所周知的,还有一些算是一种技巧。

思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定。

display:none

设置元素的display为none是最常用的隐藏元素的方法。

CSS

.hide { display:none; }

1
2
3
.hide {
     display:none;
}

将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。

注意ie6包含两个问题:
一、select、flash不能遮罩,采用iframe。
二、fixed属性采用滚动时重新计算高度或在样式中采用表达式计算expression。

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法,和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。

.hidden{ visibility:hidden }

1
2
3
.hidden{
     visibility:hidden
}

visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

源码分析:
1、creatHtml:采用doT.js初始化元素添加到body中;
2、show:设置宽度,高度,居中显示;
3、events:为关闭和确定绑定事件;
4、removeCallback:移出元素节点,如有执行回调方法;
5、ie6fixed:ie6中fixed的兼容性处理。

opacity:0

opacity属性我相信大家都知道表示元素的透明度,而将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。

.transparent { opacity:0; }

1
2
3
.transparent {
     opacity:0;
}

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中。

参数使用说明:

设置height,width等盒模型属性为0

这是我总结的一种比较奇葩的技巧,简单说就是将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素,这算是一种奇技淫巧。

.hiddenBox { margin:0; border:0; padding:0; height:0; width:0; overflow:hidden; }

1
2
3
4
5
6
7
8
.hiddenBox {
     margin:0;
     border:0;
     padding:0;
     height:0;
     width:0;
     overflow:hidden;
}

这种方式既不实用,也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而达到slideUp的效果。

width:定义弹出框的宽度,默认值是400。
height:定义弹出框的高度,默认值是100.
title:定义弹出框的标题,默认值是空。
html:定义弹出框的内容,默认值是空。
type:定义弹出框的类型,默认值是default,其他conform和alert。
closed: 标题栏中的关闭按钮,回调方法,默认为null。
conform:包含name指按钮的名称,默认值为确定,callback回调方法,默认值为null。
cancel:包含name指按钮的名称,默认值为取消,callback回调方法,默认值为null。
备注:如果使用conform或alert时,不设置type类型是不起作用。

元素隐藏后的事件响应

如果被隐藏的元素绑定了一些事件,我们执行了相关操作后,这些事件是否会被响应并执行呢,看看下面的代码:

JavaScript

<style> div { width: 100px; height: 100px; background: red; margin: 15px; padding: 10px; border: 5px solid green; display: inline-block; overflow: hidden; } .none { display: none; } .hidden { visibility: hidden; } .opacity0 { opacity: 0; } .height0 { height: 0; } </style> <div class="none"></div> <div class="hidden"></div> <div class="opacity0"></div> <div class="height0">aa</div> <script src="/Scripts/jquery-1.10.2.min.js"></script> <script> $(".none").on("click", function () { console.log("none clicked"); }) $(".hidden").on("click", function () { console.log("hidden clicked"); }) $(".opacity0").on("click", function () { console.log("opacity0 clicked"); }) $(".height0").on("click", function () { console.log("height0 clicked"); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
    }
    .none { display: none; }
    .hidden { visibility: hidden; }
    .opacity0 { opacity: 0; }
    .height0 { height: 0; }  
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(".none").on("click", function () {
        console.log("none clicked");
    })
    $(".hidden").on("click", function () {
        console.log("hidden clicked");
    })
    $(".opacity0").on("click", function () {
        console.log("opacity0 clicked");
    })
    $(".height0").on("click", function () {
        console.log("height0 clicked");
    })
</script>

这段代码将四种隐藏元素的方法分别展示出来,然后绑定其点击事件,经过测试,主要有下面的结论:

1、display:none:元素彻底消失,很显然不会触发其点击事件
2、visibility:hidden:无法触发其点击事件,有一种说法是display:none是元素看不见摸不着,而visibility:hidden是看不见摸得着,这种说法是不准确的,设置元素的visibility后无法触发点击事件,说明这种方法元素也是消失了,只是依然占据着页面空间。
3、opacity:0:可以触发点击事件,原因也很简单,设置元素透明度为0后,元素只是相对于人眼不存在而已,对浏览器来说,它还是存在的,所以可以触发点击事件
4、height:0:将元素的高度设置为0,并且设置overflow:hidden。使用这种方法来隐藏元素,是否可以触发事件要根据具体的情况来分析。如果元素设置了border,padding等属性不为0,很显然,页面上还是能看到这个元素的,触发元素的点击事件完全没有问题。如果全部属性都设置为0,很显然,这个元素相当于消失了,即无法触发点击事件。

但是这些结论真的准确吗?
我们在上面的代码中添加这样一句代码:

1 $(".none").click();

1
1 $(".none").click();

结果发现,触发了click事件,也就是通过JS可以触发被设置为display:none的元素的事件。
所以前面无法触发点击事件的真正原因是鼠标无法真正接触到被设置成隐藏的元素!!!

放在页面底部,作为公用部分:
图片 1

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:元素的几种方法的对比,弹出框插件

关键词: