整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Web 开发中出于多种原因，我们需要隐藏元素。例如，一个按钮应该在移动中可见，而在桌面视口中隐藏。或者，在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态：
在这篇文章中，我们将学习在html和css中隐藏元素，并涵盖易访问性、动画和隐藏用例等方面，让我们开始吧。
它是一个布尔 HTML 属性，隐藏了附加到它的元素。当浏览器加载一个web页面时，它不会渲染带有hidden属性的元素，除非该元素被CSS手动覆盖，这与应用display: none的效果类似。
考虑下面的例子：
我们有一个title、一个figure和一个描述。只有当视口宽度大于400px时，才会显示该图。我向元素添加了hidden`属性。
在CSS中，我使用hidden属性仅在所需的视口大小中显示元素。
img[hidden] {
display: none;
}
@media (min-width: 400px) {
img[hidden] {
display: block;
}
}事例源码：https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100
那么，你可能会问为什么不使用display: none呢?这是个好问题。当通过其hidden属性调用图像选择器时，我们可以确定即使CSS因为某种原因没有加载，元素也会被隐藏。
从可访问性的角度来看，hidden将元素完全隐藏在web页面之外，因此屏幕阅读器无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。
每个元素都有一个默认的display值，比如inline-block、block、table等等。要隐藏具有display属性的元素，我们应该使用display: none。当一个元素使用display: none隐藏时，它的所有后代都将被删除。
考虑下面的例子：
img {
display: none;
}
@media (min-width: 400px) {
img {
display: block;
}
}这将完全隐藏文档流和屏幕阅读器中的图像。也许你想知道文档流是什么？请参见下图：
注意，当蓝皮书被隐藏时，它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素时。元素的预留空间已经没有了，它更改了文档流，或者在我们的示例中，更改了图书流堆栈。
下面是一个动画，演示当移除书本时发生的情况：
是的，会的。例如，如果<image>被CSS隐藏，并且我们在某个断点处显示它，则它已经被加载。即使图片被CSS隐藏，该图片也会引起HTTP请求。
在下面的演示中，我只添加了一个图像，并使用CSS隐藏它。然后，我打开「DevTools」并检查networks选项卡，它显示图像已加载。
稍后我们将对此进行讨论，以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。
值得一提的是，有些元素的默认值是display: none。可以将<style>元素添加到HTML页面中，我们可以将其display属性更改为block，这样就可以看到它了。
「html」
<body>
<style>
.title { color: #000; }
</style>
</body>「css」
style {
display: block;
}如果您希望样式块始终可见且可编辑，这是非常有用的。可以通过向style标签添加属性contentteditable=true来编辑它。
事例：https://codepen.io/shadeed/pen/3c1e8d7d69bcf03aa875e3e50d0ffe02?editors=1100
使用display：none时，它将对屏幕阅读器完全隐藏。
通过将opacity度设置为0，该元素及其所有后代将被隐藏，并且不会被继承， 但是，它仅从视觉角度隐藏它们。除此之外，opacity值为1以外的元素将创建一个新的堆叠上下文。
在上图中，蓝皮书仅在视觉上隐藏。与使用display: none时发生的情况相比，它的空间仍然保留，并且堆栈顺序没有变化。
img {
opacity: 0;
}根据最初的示例，如果我们要隐藏不透明的图像，结果将如下所示：
该图像仍然存在，并且已保留其空间。它仅从视觉角度隐藏。
Dusan Milovanovic指出，pointer-events: none | auto可以用来禁用opacity为0的隐藏元素上的鼠标事件。这一点很重要，因为用户可能会对单击、悬停或选择隐藏元素的文本感到困惑。
事例：https://codepen.io/shadeed/pen/4900ddd4a4d324cc531c1980088f775a?editors=1100
一个元素以opacity: 0仍然可以被屏幕阅读器访问，并且可以用键盘进行聚焦。
通过使用visibility: hidden，我们可以显示或隐藏类似于使用opacity: 0的元素，而不会影响文档的视觉流。
请注意，蓝皮书是如何从可视流中隐藏的，但是它并没有影响图书堆栈的顺序。
当在父元素上使用visibility: hidden时，所有内容都是隐藏的，但是当该父元素的子元素具有visibility: visible时，将显示该子元素。
「html」
<article>
<h1>Spring is on the way</h1>
<img src="landscape.jpg" alt="">
<p><!-- Desc --></p>
</article>「CSS」
article {
visibility: hidden;
}
img {
visibility: visible;
}在上面的例子中，<article>元素具有visibility: hidden。但是，添加visibility: visible可以让图片显示。同样，这是因为visibility应用于元素的后代，但是可以从具有该元素的子元素重写它。
事例源码：https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
该元素被隐藏，其后代将从可访问性树中删除，并且屏幕阅读器不会渲染该元素。
要隐藏带有position属性的元素，我们应该将它移到屏幕外，并将其大小设置为0(宽度和高度)。个例子就是跳转导航链接。考虑下面的图:
要将链接放置在屏幕之外，我们应该添加以下内容
「css」
.skip-link {
position: absolute;
top: -100%;
}值-100%将推动元素100%的视口高度。结果，它将被完全隐藏。一旦它聚焦在键盘上，它就会像这样显示出来
.skip-link:focus {
position: absolute;
top: 0;
}事例源码：https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
屏幕阅读器可访问该元素，并且键盘可聚焦。它只是从视口中隐藏起来。
当在元素上使用clip-path时，它创建一个裁剪区域，该区域定义应该显示和隐藏哪些部分。
在上面的例子中，透明的黑色区域有clip-path。当clip-path应用于元素时，透明黑色区域下的任何内容都不会显示。
为了更直观地演示以上内容，我将使用clippy工具。在下面的GIF中，我有如下的clip-path:
将每个方向的多边形值设置为0 0，则裁剪区域的大小将调整为0。结果，图像将不会显示。同样，这也可以用一个圆来代替多边形:
img {
clip-path: circle(0 at 50% 50%);
}元素仅在视觉上隐藏， 屏幕阅读器和键盘焦点仍然可以使用它。
事例源码：https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
虽然这两种技术不像我们前面讨论的那样常见，但它们可能对某些用例有用。
通过使文本的颜色透明，它将隐藏在视觉上。这对于只有图标的按钮非常有用。
此外，将字体大小设置为0也很有用，因为这会在视觉上隐藏文本。考虑下面的示例，其中有一个具有以下结构的按钮：
我们的目标是以可访问的方式隐藏文本。为此，我添加了以下CSS
.button span {
color: transparent;
font-size: 0;
}这样，文本就被隐藏了。它甚至可以在不更改颜色的情况下工作，但是我出于解释目的添加了它。
事例源码：https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
当向元素添加aria-hidden属性时，它将从可访问性树中删除该元素，这可以增强屏幕阅读器用户的体验。注意，它并没有在视觉上隐藏元素，它只针对屏幕阅读器用户。
<button>
Menu
<svg aria-hidden="true"><!-- --></svg>
</button>在上面的例子中，我们有一个带有标签和图标的菜单按钮。为了向屏幕阅读器隐藏图标，添加了aria-hidden。
根据Mozilla Developer Network (MDN)，下面是属性的用例
是为屏幕阅读器设计的，因为它只对屏幕阅读器隐藏内容。然而，内容对于有视力的用户仍然是可见的，并且键盘是可聚焦的。
当我们想让一个隐藏的元素动起来时，例如，显示隐藏的移动导航，它需要以一种可访问的方式来完成。为了获得一种可访问的体验，我们将探索一些值得学习的好例子，以及一些不好的例子，以避免犯可能会给屏幕阅读器用户带来不好体验的错误。
#### 菜单动画-不好的例子
我们有一个菜单，在展开时需要有滑动动画。最简单的方法是在菜单中添加以下内容：
ul {
opacity: 0;
transform: translateX(100%);
transition: 0.3s ease-out;
}
ul.active {
opacity: 1;
transform: translateX(0);
}有了上述内容，菜单将根据.active类展开和折叠，该类将通过 JavaScript 如下添加:
menuToggle.addEventListener('click', function(e){
e.preventDefault();
navMenu.classList.toggle('active');
});结果可能看起来不错，但它有一个很大的错误。使用opacity: 0不会隐藏可访问性树的导航。即使导航在视觉上是隐藏的，它仍然可以通过键盘聚焦，并且可以被屏幕阅读器访问。必须将其隐藏以避免混淆用户。
下面是来自Chrome开发工具的 accessibility tree 的截图:
简而言之，accessibility tree是屏幕阅读器用户可以访问的所有内容的列表。在我们的例子中，导航列表在那里，而它在视觉上是隐藏的。我们需要解决两个问题:
1.菜单隐藏时避免用键盘聚焦 2.当导航隐藏时，避免通过屏幕阅读器告知导航
下面的屏幕截图显示了Mac OS上的VoiceOver转子是如何看到页面的。导航列表在那里，而它是隐藏的
事例源码：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
为了修正这个错误，我们需要使用visibility: hidden作为导航菜单。这将确保菜单是隐藏的视觉和屏幕阅读器。
「css」
添加后，菜单将从屏幕阅读器中隐藏。让我们再次测试，看看VoiceOver将显示什么：
事例源码：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
默认的复选框设计很难自定义，因此，我们需要为复选框创建自定义设计。让我们看看基本的 HTML：
要自定义复选框，我们需要以一种可访问的方式隐藏输入。为此，应该使用position和其他属性。有一个常见的CSS类，称为sr-only或visual -hidden，它只在视觉上隐藏一个元素，并让键盘和屏幕阅读器用户可以访问它。
事例源码：https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
### 隐藏按钮
在Twitter上，有一个名为“查看新推文”(See New Tweets)的按钮，对于带有aria-hidden内容的屏幕阅读器来说是隐藏的，只有在有新推文可用时才会显示出来。
作者：Ahmad shaded 译者：前端小智 来源：sitepoint
原文：https://www.sitepoint.com/hide-elements-in-css/
tml5移动端常用显示隐藏菜单的实现，点击侧边菜单内容展开，这些都是移动端页面经常用到的
如下：
点击菜单按钮后
展开第三级菜单效果如下
实现方法
html结构代码:
\
css:
样式代码有点多，想要源码的可以私信找我要
javascript：
部属性和全局属性
局部属性：有些元素能规定自己的属性，这种属性称为局部属性。 比如 link 元素，它具有的局部属性有 href、 rel、 hreflang、 media、 type、 sizes 这六个。 全局属性：可以用来配置所有元素共有的行为，这种属性称为全局属性，可以用在任何一个元素身上。
1、accesskey 属性
使用 accesskey 属性可以设定一个或几个用来选择页面上的元素的快捷键。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta > <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML全局属性测试</title></head><body> <form action=""> <p> Name: <input type="text" > </p> <p> Password: <input type="password" > </p> <p> Name: <input type="submit" > </p> </form></body></html>
在上面的例子中，三个 input 元素添加了 accesskey 属性，这样在 Mac 下就可以用 Control+Alt(Option)+ n快捷键访问到 Name 的输入框了。用来触发 accesskey 机制的按键组合因平台而异，具体如下：
| 浏览器 / 平台 | Window | Linux | Mac |
|---|---|---|---|
| Firefox | Alt + Shift + key | Alt + Shift + key | Control + Alt + key |
| Internet Explorer | Alt + key | N/A | N/A |
| Google Chrome | Alt + key | Alt + key | Control + Alt + key |
| Safari | Alt + key | N/A | Control + Alt + key |
| Opera | 同 Google Chrome | 同 Google Chrome | 同 Google Chrome |
关于 accesskey 这个全局属性的详解，可以看一下 HTML accesskey 属性与 web 自定义键盘快捷访问
2、class 属性
class 属性用来将元素归类，这个就无需多言了。
3、contenteditable 属性
contenteditable 是 HTML5 中新增加的属性，，其用途是让用户能够修改页面上的内容。
<body> <!-- contenteditable属性应用 --> <p contenteditable="true">设置为 true 是可编辑的</p></body>
如上例，p 元素的 contenteditable 属性值设置为 true 时，用户可以单击文字编辑内容。设置为 false 时禁止编辑。
4、dir 属性
dir 属性用来规定元素中文字的方向。有效值有两个：ltr(从左到右)、rtl(从右到左)。
<!-- dir属性应用 --><p dir="ltr">从左到右</p><p dir="rtl">从右到左</p>
5、draggable 属性
draggable 属性是 HTML5 支持拖放操作的方式之一，用来表示元素是否可被拖放。
6、dropzone 属性
dropzone 属性是 HTML5 支持拖放操作的方式之一，与 draggable 属性搭配使用。
7、id 属性
id 属性用来给元素分配一个唯一的标识符。这个也无需多言。需要说明的一点是，id 属性还可以用来导航到文档中的特定位置。
8、hidden 属性
hidden 是个布尔属性，表示相关元素当前不需要关注，浏览器对它的处理方式是隐藏相关元素（隐隐想起来控制一个元素的展示隐藏的时候，会自定义一个 hidden 类，然后在里面写隐藏样式），具体也可以看一下这篇介绍 HTML5 的 hidden 属性
<!-- hidden属性应用 --> <div hidden>这个元素将会被隐藏</div>
9、lang 属性
lang 属性用于说明元素内容使用的语言。lang 属性必须使用有效的 ISO 语音代码，使用这个属性的目的在于，让浏览器调整其表达元素内容的方式，比如在使用了文字朗读器的情况下正确发音。
<!-- lang属性应用 --> <p lang="en">Hello - how are you?</p>
10、spellcheck 属性
spellcheck 属性用来表明浏览器是否应该对元素的内容进行拼写检查，这个属性只有用在用户可以编辑的元素上时才有意义。 spellcheck 属性可以接受的值有两个：true 和 false。至于拼写检查的实现方式则因浏览器而异。
<!-- spellcheck属性应用 --> <textarea >This is some lalalala text</textarea>
11、style 属性
style 属性用来直接在元素身上定义 CSS 样式，这个也不做过多描述了。
12、tabindex 属性
HTML 页面的键盘焦点可以通过按 Tab 键在各元素之间切换。用 tabindex 属性可以改变默认的转移顺序。
<!-- tabindex属性应用 --> <form action=""> <label>Name: <input type="text" ></label> <label>City: <input type="text" ></label> <label>Country: <input type="text" ></label> <input type="submit" value="" tabindex="3"> </form>
上面的代码实现效果是：在按 Tab 键的过程中，tabindex 为 1 的 Country 输入框第一个被选中，接着焦点会跳到 Name 输入框，最后是 submit 提交。tabindex 设置为 - 1 的元素不会在用户按下 Tab 键后被选中。
13、title 属性
title 属性提供了元素的额外信息，浏览器通常用这些东西显示工具条提示，这个在一些展示不全的文本标题也经常使用。
<!-- title属性应用 --><a href="https://qiqihaobenben.github.io/" title="我的个人网站">qiqihaobenben.github.io</a>
*请认真填写需求信息，我们会在24小时内与您取得联系。
