彩票网站制作找谁,响应式网站建设源码,做互联网平台要多少钱,重庆seo排名方法目录 1#xff0c;hidden 和 display:none 的关系2#xff0c;其他隐藏元素的方式2.1#xff0c;语意上的隐藏2.2#xff0c;视觉上的隐藏 1#xff0c;hidden 和 display:none 的关系
hidden - MDN 参考
一句话总结#xff1a;hidden 是HTML5 新增的全局布尔属性… 目录 1hidden 和 display:none 的关系2其他隐藏元素的方式2.1语意上的隐藏2.2视觉上的隐藏 1hidden 和 display:none 的关系
hidden - MDN 参考
一句话总结hidden 是HTML5 新增的全局布尔属性可以隐藏页面元素表现和 display: none 一致。
所以设置元素显隐时之前的写法
templatediv :class[item, { hide: hide }]求关注/div
/templatestyle langless
.item {/* 其他 css */.hide {display: none;}
}
/style更改后的写法
templatediv classitem :hiddenhide求关注/div
/templatestyle langless
.item {/* 其他 css */
}
/style需要注意一点display 的其他属性值会覆盖 hidden 。 所以如果 item 默认是 display: flex;则还需要全局添加一个属性选择器如果不显示的声明 display 就不用添加了。
[hidden] {display: none;
}2其他隐藏元素的方式
2.1语意上的隐藏
设置 aria-hidden: true 可使读屏软件不可读但是元素仍然占据空间并且可见。
div aria-hiddentrue/div2.2视觉上的隐藏
display: none 是完全隐藏元素从渲染树中消失不占据空间。
opacity: 0 或设置元素的left 或margin-left 为很大的负数实现的都是屏幕中不可见但占据空间。 以上。
