首頁 > web前端 > html教學 > html怎麼設定元素不可見

html怎麼設定元素不可見

青灯夜游
發布: 2021-10-11 11:42:14
原創
9477 人瀏覽過

html設定元素不可見的方法:1、在元素標籤中加入hidden屬性;2、在元素標籤中使用style屬性設定「display:none」樣式;3、在元素標籤中使用style屬性設定“visibility:hidden”樣式。

html怎麼設定元素不可見

本教學操作環境: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影片教學

以上是html怎麼設定元素不可見的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板