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 为很大的负数,实现的都是屏幕中不可见,但占据空间。


以上。

相关推荐
何双新2 小时前
Odoo AI 智能查询系统
前端·人工智能·python
秋名山大前端8 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug8 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn8 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636029 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4169 小时前
HTML(面试)
前端
excel9 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴9 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy9 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者9 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js