HTML5 的全局属性 hidden 和 display:none 的关系

目录

1,hidden 和 display:none 的关系

hidden - MDN 参考

一句话总结:hidden 是HTML5 新增的全局布尔属性 ,可以隐藏页面元素,表现和 display: none 一致。

所以设置元素显隐时,之前的写法

html 复制代码
<template>
  <div :class="['item', { hide: hide }]">求关注</div>
</template>

<style lang="less">
.item {
  /* 其他 css */
  &.hide {
    display: none;
  }
}
</style>

更改后的写法:

html 复制代码
<template>
  <div class="item" :hidden="hide">求关注</div>
</template>

<style lang="less">
.item {
  /* 其他 css */
}
</style>

需要注意一点,display 的其他属性值会覆盖 hidden

2,其他隐藏元素的方式

2.1,语意上的隐藏

设置 aria-hidden: true 可使读屏软件不可读,但是元素仍然占据空间并且可见。

html 复制代码
<div aria-hidden="true"></div>

2.2,视觉上的隐藏

display: none 是完全隐藏,元素从渲染树中消失,不占据空间。

opacity: 0 或设置元素的leftmargin-left 为很大的负数,实现的都是屏幕中不可见,但占据空间。


以上。

相关推荐
ygming7 分钟前
Q51- code295- 数据流的中位数 + Q52- code767- 重构字符串
前端
袋鱼不重9 分钟前
手把手搭建Vue轮子从0到1:4. Reactivity 模块的实现
前端·vue.js·源码
!win !10 分钟前
免费的个人网站托管-GitHub Pages篇
前端·开发工具
xw511 分钟前
免费的个人网站托管-GitHub Pages篇
前端·github
阿星AI工作室12 分钟前
扣子可以发布到小米搞钱了!手把手教程来了丨coze开发者瓜分亿级流量池指南
前端·人工智能·后端
小华同学ai13 分钟前
GitHub 开源爆款工具|MediaCrawler:程序员零门槛采集抖音/小红书/B站等社交评论,30K star 背后的场景实战揭秘!
前端·后端·github
盏灯13 分钟前
🔥🔥🔥websocket 前后端通信,接受命令,并执行
前端·后端·websocket
闲坐含香咀翠15 分钟前
B端项目版本同步方案:基于Vite插件的自动化实践
前端·vite·rollup.js
Skelanimals16 分钟前
基于DSL的动态组件扩展
前端
斯文的孙35 分钟前
React JSX:每天都在用,但你真的了解它吗?
前端·react.js