温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html如何设置元素不可见

发布时间:2021-10-11 13:42:16 来源:亿速云 阅读:699 作者:小新 栏目:web开发

小编给大家分享一下html如何设置元素不可见,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

html设置元素不可见的方法:1、在元素标签中添加hidden属性;2、在元素标签中使用style属性设置“display:none”样式;3、在元素标签中使用style属性设置“visibility:hidden”样式。

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

html中使元素不可见有三种方法:

  • 使用hidden属性

  • 使用style属性设置display:none

  • 使用style属性设置visibility:false

显然,使元素不可见有两类方式:

  • 元素彻底不可见,元素不会占据空间,仿佛消失了一样

  • 元素不可见,但是依旧占据着原来的空间,仿佛隐形了一样

使用hidden属性

<div hidden>hello</div>

使用hidden属性的效果就是在渲染DOM时,会自动把该元素的display属性改为none。注意,hidden属性的唯一用途就在此处:只在第一次添加hidden属性时把display改为none。以后即便display属性变成了block,hidden属性依旧在那里放着。

由此可知,hidden和display=none产生的效果是相同的。但是不如display更直接、更根本。因此,以后不要使用hidden属性,直接访问style中的display属性。

使用style属性设置display:none

style中的display=none能够让一个元素彻底消失,无影无踪,不占空间。

<div style="display:none">hello</div>

使用style属性设置visibility=hidden

style中的visibility=hidden时,元素像隐形了一样,但是依旧占据原来的空间。

<div style="visibility:hidden">hello</div>

看完了这篇文章,相信你对“html如何设置元素不可见”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI