>

隐藏页面元素的,隐藏页面元素常用方法

- 编辑:至尊游戏网站 -

隐藏页面元素的,隐藏页面元素常用方法

用 CSS 隐蔽页面成分的 5 种艺术

2016/06/12 · CSS · 隐蔽成分

初藳出处爬山涉水 Baljeet Rathi   译文出处跋山涉水的近义词十年踪迹(@十年踪迹)   

用 CSS 遮盖页面成分有繁多种办法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可以知道区域。

你有没有想过,为何大家要有这么多技能来掩没成分,而它们看起来都达成的是相像的效益?每大器晚成种办法其实与其余艺术之间都有蒸蒸日上对一线的例外,这么些差别决定了在一个一定的场所下采用哪八个措施。那篇教程将掩瞒到那一个你要求牢记的细微分裂点,让您依照差别境况采纳方面那么些主意中相符的艺术来隐瞒成分。

用 CSS 掩没页面成分有成都百货上千种办法。你能够将opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或然将 position 设为 absolute 然后将地方设到不可以知道区域。

Opacity

opacity 属性的意趣是安装三个要素的发光度。它不是为转移成分的边界框(bounding box)而设计的。那意味将 opacity 设为 0 只好从视觉上隐瞒成分。而要素本人照旧吞并它自个儿的地点并对网页的布局起成效。它也将响应客户交互。

CSS

.hide { opacity: 0; }

1
2
3
.hide {
  opacity: 0;
}

即便你希图动用 opacity 属性在读屏软件中掩瞒成分,十分不幸,你并不可能顺风。成分和它兼具的从头到尾的经过会被读屏软件阅读,就好像网页上的别的因素那样。换句话说,成分的作为就和它们不透明时豆蔻梢头致。

本人还要提醒一句,opacity 属性可以用来兑现部分职能很棒的动画片。任何 opacity 属性值小于 1 的要素也会创设贰个新的聚积上下文(stacking context)。

看上面包车型客车事例跋山涉水的近义词

看 @SitePoint 提供的例证“用 opacity 隐蔽成分”

当你的鼠标移到被埋伏的第 2 个的区块上,元素状态平滑地从一丝一毫透明过渡到完全不透明。区块也将 cursor 属性设置为了 pointer,那表达了顾客能够与它交互。

Opacity

Visibility

其次个要说的性质是 visibility。将它的值设为 hidden 将隐形大家的因素。就像是 opacity 属性,被埋伏的因素依旧会对我们的网页布局起成效。与 opacity 独一分化的是它不会响应任何客商交互。别的,成分在读屏软件中也会被埋伏。

其豆蔻梢头性格也能够贯彻动画效果,只要它的起始和了结状态不相仿。那确认保证了 visibility 状态切换之间的连片动画能够是时间平滑的(事实上能够用那或多或少来用 hidden 实现要素的延期显示和隐形——译者注)。

CSS

.hide { visibility: hidden; }

1
2
3
.hide {
   visibility: hidden;
}

上边包车型客车例证演示了 visibilityopacity 有何样的例外爬山涉水

看 @SitePoint 提供的事例“用 visibility 隐讳成分”

至尊游戏网站,留意,倘若八个要素的 visibility 被安装为 hidden,同一时间想要呈现它的某部子孙成分,只要将非常成分的 visibility 显式设置为 visible 就可以(就像例子里面的 .o-hide p——译者注)。尝试只 hover 在掩盖成分上,不要 hover 在 p 标签里的数字上,你会意识你的鼠标光标未有成为手指头的指南。此时,你点击鼠标,你的 click 事件也不会被触发。

而在 <div> 标签里面包车型客车 <p> 标签则还是得以捕获全数的鼠标事件。风姿洒脱旦您的鼠标移动到文字上,<div> 自己变得可以预知並且事件注册也随后生效。

opacity 属性的野趣是安装多个因素的光滑度。它不是为改形成分的边界框(bounding box)而规划的。那代表将 opacity 设为 0 只可以从视觉上隐敝成分。而要素本人依旧占领它和煦的岗位并对网页的布局起效果。它也将响应客商交互。

Display

display 属性依照词义真正隐蔽成分。将 display 属性设为 none 确认保证成分不可以预知况兼连盒模型也不改变换。使用那些天性,被埋伏的成分不占用任何空间。不仅仅如此,风流倜傥旦 display 设为 none 任何对该因素间接打顾客交互操作都不容许立竿见影。另外,读屏软件也不会读到成分的源委。这种艺术发生的效劳就如成分完全不设有。

别的那些成分的子孙成分也会被同不时候遮掩。为这天天性增加过渡动画是低效的,它的此外例外景色值时期的切换总是会立刻生效。

但是请在乎,通过 DOM 依旧能够访问到那一个成分。由此你能够经过 DOM 来操作它,好似操作其余的成分。

CSS

.hide { display: none; }

1
2
3
.hide {
   display: none;
}

看下边包车型大巴例证跋山涉水的近义词

@SitePoint 提供的例子“用 display 隐讳成分”

您将看见第1个块成分内有一个 <p> 成分,它自个儿的 display 属性被安装成 block,但是它照旧不可以预知。那是 visibility:hiddendisplay:none 的另四个差异之处。在前三个事例里,将别的子孙成分 visibility 显式设置成 visible 可以让它变得可以见到,不过 display 不吃那后生可畏套,不管作者的 display 值是怎么样,只要祖先成分的 displaynone,它们就都不可以知道。

现行反革命,将鼠标移到第贰个块成分上边两次,然后点击它。那几个操作将让第二个块成分显现出来,它里面包车型大巴数字将是多个胜出 0 的数。那是因为,成分便是被这么设置成对客商隐蔽,依然得以经过 JavaScript 来开展操作。

.hide {

Position

假设有二个要素你想要与它交互,不过你又不想让它影响你的网页布局,未有确切的习性能够管理这种景色(opacity 和 visibility 影响布局, display 不影响布局但又力所不及直接互动——译者注)。在此种情状下,你只可以思虑将成分移出可视区域。这些点子既不会潜移默化布局,有能让要素保持能够操作。下边是运用这种办法的 CSS爬山涉水

CSS

.hide { position: absolute; top: -9999px; left: -9999px; }

1
2
3
4
5
.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

上边包车型大巴例证注脚了什么通过相对定位的办法隐蔽成分,并让它和前边的不行例子效果同样跋山涉水的近义词

看 @SitePoint 提供的例子“用 position 属性隐藏成分”

这种方式的根本原理是透过将成分的 top 和 left 设置成充足大的负数,使它在显示器上不可以预知。采取那些本领的叁个好处(只怕地下的后天不良)是用它蒙蔽的成分的内容能够被读屏软件读取。那统统能够知晓,是因为您只是将成分移到可视区域外面让顾客不可能看见它。

您得防止选择那几个主意去潜伏任何能够获取核心的成分,因为若是那么做,当客商让老大成分得到宗旨时,会产生二个不足预期的纽带切换。那些方法在成立自定义复选框和单选开关时常常被选用。(用 DOM 模拟复选框和单选按键,但用那个办法隐藏真正的 checkbox 和 radio 成分来“选用”大旨切换——译者注)

  opacity: 0;

Clip-path

遮掩成分的另后生可畏种方法是经过剪裁它们来兑现。在那前,那足以透过 clip 属性来完结,不过那些脾气被舍弃了,换到一个越来越好的习性叫做 clip-path。Nitish Kumar 最近在 SitePoint 发表了“介绍 clicp-path 属性”那篇小说,通过翻阅它能够领悟那几个性情的越来越多高端用法。

记住,clip-path 属性还尚无在 IE 恐怕 Edge 下被完全支持。即使要在你的 clip-path 中使用外界的 SVG 文件,浏览器帮衬度还要更低。使用 clip-path 属性来隐敝成分的代码看起来如下爬山涉水

.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }

1
2
3
.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

下边是多少个其进行使它的例证跋山涉水的近义词

看 @SitePoint 提供的例子“用 clip-path 属性掩没成分”

假若你把鼠标悬停在首先个因素上,它照旧得以影响第一个要素,纵然第贰个成分已经因而 clip-path 掩瞒了。借使您点击它,它会移除用来掩藏的 class,让大家的成分从十二分地点显现出来。被隐敝成分中的文字依然能够通过读屏软件读取,多数WordPress 站点使用 clip-path 只怕从前的 clip 来达成特意为读屏软件提供的文字。

虽说大家的因素本身不再显得,它也照例占领应有占领的矩形大小,它相近的成分的一坐一起就有如它可以知道时同样。记住顾客交互举例鼠标悬停大概点击在剪裁区域之外也不或许立竿见影。在大家的例证里,剪裁区大小为零,那意味着顾客将无法与潜伏的因素间接互动。别的,那脾性格可以使用各类过渡动画来兑现不相同的作用。

}

结论

在此篇教程里,大家看了 5 种差异的通过 CSS 掩瞒成分的格局。每生气勃勃种艺术都与其余二种有一些有别于。知道您想要落成怎么着有扶持你调整动用哪三个天性,随着时间推移,你就能够依附实际必要本能地筛选最好艺术了。要是您对此掩盖成分的这个措施还会有别的难题,请在言三语四中留言。

1 赞 5 收藏 评论

至尊游戏网站 1

只要你筹算采用 opacity 属性在读屏软件中隐蔽成分,很倒霉,你并不可能八面驶风。成分和它有着的剧情会被读屏软件阅读,就像网页上的任何因素那样。换句话说,成分的行为就和它们不透明时相仿。

笔者还要提醒一句,opacity 属性能够用来贯彻部分作用很棒的卡通。任何 opacity 属性值小于 1 的成分也会创设三个新的聚积上下文(stacking context)。

 

看下边包车型地铁例证爬山涉水

看 @SitePoint 提供的例证“用 opacity 掩盖成分”

当您的鼠标移到被埋伏的第 2 个的区块上,成分状态平滑地从一丝一毫透明过渡到完全不透明。区块也将 cursor 属性设置为了 pointer,那表明了顾客能够与它交互。

Visibility

第三个要说的属性是 visibility。将它的值设为 hidden 将潜伏大家的要素。就像是 opacity 属性,被埋伏的成分依旧会对我们的网页布局起成效。与 opacity 独一差异的是它不会响应任何客户交互。另外,成分在读屏软件中也会被埋伏。

本条天性也能够落到实处动画效果,只要它的起来和了结状态分裂等。那确认保障了 visibility 状态切换之间的连结动画能够是光阴平滑的(事实上能够用那或多或少来用 hidden 达成要素的推移显示和隐身——译者注)。

 

.hide {

   visibility: hidden;

}

下边包车型客车事例演示了 visibility 与 opacity 有何的比不上跋山涉水的近义词

看 @SitePoint 提供的例子“用 visibility 蒙蔽成分”

留心,若是八个要素的 visibility 棉被服装置为 hidden,相同的时候想要呈现它的某个子孙成分,只要将足够成分的 visibility 显式设置为 visible 就能够(就像例子里面包车型大巴 .o-hide p——译者注)。尝试只 hover在隐敝成分上,不要 hover 在 p 标签里的数字上,你会发觉你的鼠标光标未有成为手指头的榜样。此时,你点击鼠标,你的 click 事件也不会被触发。

而在 <div> 标签里面包车型大巴 <p> 标签则依旧得以捕获全部的鼠标事件。龙马精神旦你的鼠标移动到文字上,<div> 自个儿变得可以预知而且事件注册也随着生效。

Display

 

display 属性依据词义真正隐敝成分。将 display 属性设为 none 确定保证元素不可以见到并且连盒模型也不扭转。使用那特特性,被埋伏的成分不占用任何空间。不仅仅如此,英姿焕发旦 display 设为 none 任何对该因素直接打客户交互操作都不容许奏效。别的,读屏软件也不会读到成分的原委。这种方法发生的作用仿佛成分完全不设有。

别的这些因素的子孙成分也会被同一时间掩盖。为那特性子加多过渡动画是不行的,它的其他例外境况值时期的切换总是会立即生效。

只是请留神,通过 DOM 还是得以访谈到那个因素。因而你能够因而 DOM 来操作它,就像操作其余的因素。

.hide {

   display: none;

}

看上边包车型地铁例证跋山涉水的近义词

@SitePoint 提供的例子“用 display 遮掩成分”

你将见到第三个块成分内有四个 <p> 成分,它和煦的 display 属性被安装成 block,可是它照旧不可以见到。那是 visibility:hidden 和 display:none 的另三个分化之处。在前一个例证里,将其他子孙成分 visibility 显式设置成 visible 可以让它变得可以知道,不过 display 不吃那龙马精气神套,不管作者的 display值是何许,只要祖先成分的 display 是 none,它们就都不可以预知。

当今,将鼠标移到第二个块成分上边五回,然后点击它。这一个操作将让第4个块成分显现出来,它里面包车型地铁数字将是二个不只有 0 的数。那是因为,成分正是被那样设置成对客商隐瞒,还可以够通过JavaScript 来进展操作。

Position

要是有三个因素你想要与它交互,可是你又不想让它影响您的网页布局,未有合适的习性能够拍卖这种景况(opacity 和 visibility 影响布局, display 不影响布局但又不可能直接互动——译者注)。在这里种情景下,你必须要思考将成分移出可视区域。这么些措施既不会影响布局,有能让要素保持能够操作。下面是选取这种办法的 CSS跋山涉水的近义词

.hide {

   position: absolute;

   top: -9999px;

   left: -9999px;

}

下边包车型地铁事例注明了怎样通过相对定位的法子隐蔽成分,并让它和眼下的百般例子效果等同爬山涉水

看 @SitePoint 提供的例证“用 position 属性掩没成分”

这种办法的关键原理是因此将成分的 top 和 left 设置成丰富大的负数,使它在荧屏上不可知。采取那几个技巧的二个功利(也许地下的弱项)是用它掩盖的成分的源委能够被读屏软件读取。那一点一滴能够精晓,是因为你只是将成分移到可视区域外面让客商不恐怕看见它。

你得制止接收这几个点子去潜伏任何可以博得主旨的因素,因为假设那么做,当客户让这一个成分获得核心时,会招致四个不行预料的关节切换。那些艺术在创造自定义复选框和单选按键时常常被接受。

Clip-path

隐敝成分的另风度翩翩种办法是透过剪裁它们来完成。在原先,那足以因此 clip 属性来兑现,然而这一个个性被遗弃了,换到三个更加好的天性叫做 clip-path。Nitish Kumar 近些日子在 SitePoint 发布了“介绍clicp-path 属性”那篇小说,通过阅读它能够精晓这一个特性的愈来愈多高端用法。

牢记,clip-path 属性尚未在 IE 也许 Edge 下被完全扶植。尽管要在你的 clip-path 中利用外界的 SVG 文件,浏览器扶持度还要更低。使用 clip-path 属性来掩饰成分的代码看起来如下爬山涉水

.hide {

  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

}

上面是叁个实际选取它的事例爬山涉水

看 @SitePoint 提供的事例“用 clip-path 属性隐蔽成分”

假诺您把鼠标悬停在第一个因素上,它依旧能够影响第三个要素,即使首个要素已经经过 clip-path 掩盖了。假如你点击它,它会移除用来掩藏的 class,让大家的因素从那多少个地点显现出来。被掩瞒成分中的文字依旧能够透过读屏软件读取,许多 WordPress 站点使用 clip-path 只怕早前的clip 来兑现特地为读屏软件提供的文字。

虽说我们的要素本人不再展现,它也照旧侵占应有攻陷的矩形大小,它周边的因素的一颦一笑就好像同它可知时肖似。记住顾客交互举个例子鼠标悬停恐怕点击在剪裁区域之外也不容许奏效。在大家的事例里,剪裁区大小为零,那意味用户将不能与潜伏的成分直接互动。别的,这几个脾气可以利用各个过渡动画来得以达成分化的成效。

小说出处和来自网站跋山涉水的近义词

本文由门户名站发布,转载请注明来源:隐藏页面元素的,隐藏页面元素常用方法