1. 程式人生 > >hidden="hidden",display:none, visibility:hidden 三者的區別

hidden="hidden",display:none, visibility:hidden 三者的區別

但是 效果 isp 大神 log 語義 .com ted input

三者都可以實現隱藏元素的效果

1:display:none 就是把元素隱藏,即在頁面上看不到這個元素,並且不占據任何位置

2:hidden="hidden"在頁面展示出來效果跟display:none是一樣的,並且我們可以在瀏覽器控制臺看到,瀏覽器就是把它解析為display:none

技術分享圖片

但是hidden="hidden" 是html,html 是有語義的,跟我們的input等等一樣,他的語義就是跟瀏覽者不相關的,不需要的,這樣的話,瀏覽器解析的時候就會把它隱藏掉,

因為元素不需要被瀏覽者看到,但是在別的地方,比如屏幕閱讀器或者其它依賴語義的地方,可能就會用到它。我們常常用來提交隱藏的hidden到後端

而display:none 則是css樣式相關的,從樣式層面隱藏隱藏元素,並且可以程序切換它的隱藏和顯示,所以,它並不是跟瀏覽者不相關的,而是暫時不需要顯示而已

3:visibility:hidden 也是css層面的,它會隱藏元素,但是 保留元素所在頁面的位置,例如

技術分享圖片

以上就是三者的異同,原答案請看知乎大神的回答

https://www.zhihu.com/question/35952297?sort=created

hidden="hidden",display:none, visibility:hidden 三者的區別