前端高階之如何隱藏頁面中的某個元素?

2021-09-24 06:29:20 字數 1257 閱讀 8796

github: krisachan

背景:最近高階前端工程師劉小夕github上開了個每個工作日布乙個前端相關題的repo,懷著學習的心態我也參與其中,以下為我的回答,如果有不對的地方,非常歡迎各位指出。

可見性螢幕可見

可訪問樹

完全隱藏

隱藏隱藏

語義上隱藏

可見隱藏

視覺上隱藏

隱藏可見

此方法會讓元素從渲染樹中消失,渲染的時候不佔據任何空間,且不可進行dom操作。

hide 

複製**

此方法相當於display: none;

hidden>

div>

複製**

此方法使讀屏軟體不可讀,但正常佔據空間,且可進行dom操作。

aria-hidden="true">

div>

複製**

此方法使肉眼不可見,但佔據正常空間,且不可進行dom操作。

hide 

複製**

此方法使肉眼不可見,但佔據正常空間,且可進行dom操作。

hide 

複製**

此方法使肉眼不可見,但佔據正常空間,且可進行dom操作。

hide 

複製**

此方法把要隱藏的dom移出到可視位置,不佔據正常流,且可進行dom操作。

:root 

hide

複製**

此方法使肉眼不可見,但佔據正常空間,且可進行dom操作。

hide 

複製**

此方法使肉眼不可見,但佔據正常空間,且可進行dom操作。

:root 

hide

複製**

魚頭的web海洋」,隨時與魚頭互動。歡迎!衷心希望可以遇見你。

前端頁面中的儲存邏輯

而像手機的設定頁面上,當我們設定螢幕亮度的時候,我們希望立即看到效果,而不是點選儲存按鈕,才能看到亮度變化了。我們也不希望修改這些非常基礎的設定,系統還要我們確認是否確定我們的操作。因此對於希望能夠即時看到修改效果,並且無需額外確認的頁面,我們可以講請求後台的邏輯放到onchange,或者onlos...

如何顯示網頁中的隱藏鏈結 如何隱藏單元格中的內容

在編輯工作表時,對於某些重要資料不希望被其他使用者檢視,可將其隱藏起來。具體操作方法如下。第1步 選中要隱藏內容的單元格區域,開啟 設定單元格格式 對話方塊。第2步 在 分類 列表框中選擇 自定義 選項 在右側的 型別 文字框中輸入三個英文半形分號 操作如下圖所示。第3步 切換到 保護 選項卡 取消...

js 如何將某個屬性設定成隱藏的

ecmascript5下,可以為物件定義隱藏屬性 這樣定義的屬性不可列舉,故不出現在序列化結果中。在 開發應用中,方便避免將隱藏屬性序列在資料中傳送給伺服器 a a y 2 新增非隱藏屬性y json.stringify a object.defineproperty a,z console.log...