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

目录

  • 1,hidden 和 display:none 的关系
  • 2,其他隐藏元素的方式
    • 2.1,语意上的隐藏
    • 2.2,视觉上的隐藏

1,hidden 和 display:none 的关系

hidden - MDN 参考

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

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

<template><div :class="['item', { hide: hide }]">求关注</div>
</template><style lang="less">
.item {/* 其他 css */&.hide {display: none;}
}
</style>

更改后的写法:

<template><div class="item" :hidden="hide">求关注</div>
</template><style lang="less">
.item {/* 其他 css */
}
</style>

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

在这里插入图片描述

2,其他隐藏元素的方式

2.1,语意上的隐藏

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

<div aria-hidden="true"></div>

2.2,视觉上的隐藏

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

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


以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/189344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Centos7使用阿里云镜像加速服务安装Docker

文章目录 一、前提说明二、安装docker1、创建docker文件夹2、安装所需的软件包3、设置Docker仓库4、安装docker5、启动验证使用阿里云镜像加速服务 三、卸载docker 一、前提说明 需要先安装好虚拟机&#xff0c;可以查看这篇https://blog.csdn.net/qq_36433289/article/detail…

Python批处理PDF文件,PDF附件轻松批量提取

PDF附件是指在PDF文档中嵌入的其他文件&#xff0c;如图像、表格、音频、视频或其他文档。这些附件可以与PDF文档一起存储、传输和共享&#xff0c;为文档提供了更丰富的内容和更多的功能。通过添加附件&#xff0c;我们可以将相关文件和信息捆绑在一起&#xff0c;使其更易于管…

Verilog 入门(五)数据流模型化

文章目录 连续赋值语句时延 连续赋值用于数据流行为建模&#xff1b;相反&#xff0c;过程赋值用于顺序行为建模。组合逻辑电路的行为最好使用连续赋值语句建模。 连续赋值语句 连续赋值语句将值赋给线网&#xff08;连续赋值不能为寄存器赋值&#xff09;&#xff0c;它的格式…

Linux 只能收到 SYN 包 不能回包

如果用户发现云主机不能登录&#xff0c;例如无法远程 22 端口或其他端口&#xff0c;但是更换网络环境正常&#xff0c;服务端抓包发现客户端发包只有 SYN&#xff0c;没有回包&#xff0c;可以执行 netstat -s |grep rejec 查看下是否是 tcp_timestamps 的问题 [roothfgo2 ~…

Java的53个关键字分类及详细说明(包含3个特殊直接量+2个保留字)

文章目录 关键字,特殊直接量&#xff0c;保留字关键字的详细用法说明&#xff08;1&#xff09;访问控制类关键字&#xff08;2&#xff09;修饰符类关键字&#xff08;3&#xff09;程序控制类关键字&#xff08;4&#xff09;错误处理类关键字&#xff08;5&#xff09;包相关…

Python+Requests模拟发送GET请求

模拟发送GET请求 前置条件&#xff1a;导入requests库 一、发送不带参数的get请求 代码如下&#xff1a; 以百度首页为例 import requests# 发送get请求 response requests.get(url"http://www.baidu.com") print(response.content.decode("utf-8"))…

Drift plus penalty 漂移加惩罚Part2——性能分析

文章目录 正文Performance analysisAverage penalty analysis 平均惩罚分析Average queue size analysis 平均队列大小分析Probability 1 convergenceApplication to queues with finite capacityTreatment of queueing systemsConvex functions of time averages Delay tradeo…

SSR是什么?Vue中怎么实现?

一、是什么 概念 SSR是指服务器端渲染&#xff08;Server-Side Rendering&#xff09;&#xff0c;是一种将客户端和服务器端合并的 Web 应用程序渲染技术。在 SSR 中&#xff0c;应用程序的 UI 在服务器端渲染完成后&#xff0c;再将整个渲染好的 HTML、CSS 和 JavaScript 发…

西南科技大学信号与系统A课程设计报告(信号卷积与应用)

一、设计任务 编制MATLAB程序,实现任意两输入信号的卷积和运算,并正确显示输入信号、输出信号的波形。(程序文件名:ConvSum_本人姓名首拼小写.m,本程序不允许使用conv函数)输入信号x为频率0.1 Hz和0.3 Hz的等幅正弦波之和,利用fir1函数设计滤波器h,去除0.3 Hz的正弦信号…

Vue 3.0 组合式API Setup

文章目录 前言参数Props上下文访问组件的 property结合模板使用使用渲染函数使用 this后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;vue.js &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不…

使用WalletConnect Web3Modal v3 链接钱包基础教程

我使用的是vueethers 官方文档&#xff1a;WalletConnect 1.安装 yarn add web3modal/ethers ethers 或者 npm install web3modal/ethers ethers2.引用 新建一个js文件&#xff0c;在main.js中引入&#xff0c;初始化配置sdk import {createWeb3Modal,defaultConfig, } from…

CMMI认证含金量高吗

一、CMMI认证含金量解答 CMMI&#xff0c;即能力成熟度模型集成&#xff0c;是由美国卡内基梅隆大学软件工程研究所开发的一种评估企业软件开发过程成熟度的模型。CMMI认证的含金量究竟高不高呢&#xff1f;答案是肯定的。CMMI认证被誉为软件开发行业的“金牌标准”&#xff0…

【算法】合并K个升序链表

这道题主要考察的是归并排序&#xff0c;因为已经升序过了&#xff0c;更好理解了。 当然也可以采用分治的思路&#xff1b;或采用最小堆的思路&#xff1b;面试中校招同学写出一种即可&#xff0c;如果能全概览讲一下&#xff0c;就更加分了。 #############################…

力扣题:字符的统计-12.2

力扣题-12.2 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;423. 从英文中重建数字 解题思想&#xff1a;有的单词通过一个字母就可以确定&#xff0c;依次确定即可 class Solution(object):def originalDigits(self, s):""":typ…

okhttp系列-拦截器的执行顺序

1.将拦截器添加到ArrayList final class RealCall implements Call {Response getResponseWithInterceptorChain() throws IOException {//将Interceptor添加到ArrayListList<Interceptor> interceptors new ArrayList<>();interceptors.addAll(client.intercept…

03-IDEA集成Git,初始化本地库,添加远程仓库,提交,拉取,推送,分支的快捷操作

IDEA集成Git 创建Git忽略文件 不同的IDE开发工具有不同的特点文件,这些文件与项目的实际功能无关且不参与服务器上的部署运行, 把它们忽略掉能够屏蔽之间的差异 局部忽略配置文件: 在本地仓库的根目录即项目根目录下直接创建.gitignore文件, 以文件后缀或目录名的方式忽略指定…

双远心镜头:让视觉检测更精准、高效!

工业镜头是视觉系统中的重要组件&#xff0c;工业镜头的选型影响着整个系统的成像效果。在做视觉检测时&#xff0c;会遇到无法检测空间物体、无法控制视场变化、无法控制图像扭曲、对比度低、畸变大、反光等问题&#xff0c;这时普通的工业镜头并不能有效地解决问题&#xff0…

校园门禁可视化系统解决方案

随着科技的持续进步&#xff0c;数字化校园在教育领域中的地位日益上升&#xff0c;各种智能门禁、安防摄像头等已遍布校园各个地方&#xff0c;为师生提供安全便捷的通行体验。然而数据收集分散、缺乏管理、分析困难等问题也逐渐出现&#xff0c;在这个数字化环境中&#xff0…

《opencv实用探索·六》简单理解图像膨胀

1、图像膨胀原理简单理解 膨胀是形态学最基本的操作&#xff0c;都是针对白色部分&#xff08;高亮部分&#xff09;而言的。膨胀就是使图像中高亮部分扩张&#xff0c;效果图拥有比原图更大的高亮区域。 2、图像膨胀的作用 注意一般情况下图像膨胀和腐蚀是联合使用的。 &…

scrapy介绍,并创建第一个项目

一、scrapy简介 scrapy的概念 Scrapy是一个Python编写的开源网络爬虫框架。它是一个被设计用于爬取网络数据、提取结构性数据的框架。 Scrapy 使用了Twisted异步网络框架&#xff0c;可以加快我们的下载速度。 Scrapy文档地址&#xff1a;http://scrapy-chs.readthedocs.io/z…