HTMLElement: inert 屬性

Baseline 廣泛可用 *

此功能已成熟,並且在許多裝置和瀏覽器版本中都能正常工作。自 ⁨2023 年 4 月⁩ 起,所有瀏覽器均已支援此功能。

* 此特性的某些部分可能存在不同級別的支援。

HTMLElement 屬性 inert 反映了元素的 inert 屬性值。它是一個布林值,當存在時,會使瀏覽器“忽略”該元素的事件輸入,包括焦點事件和輔助技術的事件。瀏覽器也可能忽略該元素中的頁面搜尋和文字選擇。這在構建模態框等 UI 時非常有用,當模態框可見時,您可能希望將焦點“捕獲”在模態框內。

請注意,如果 inert 屬性未指定,該元素本身仍可能從其父元素繼承 inertness。但是,這種繼承的 inertness 不會透過此屬性的值反映出來。將該屬性顯式設定為 false 無法撤銷從父元素繼承的 inertness。

一個布林值,如果元素是 inert,則為 true;否則,值為 false

示例

HTML

html
<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

CSS

css
[inert] > * {
  opacity: 0.5;
}

注意:此屬性本身不會導致瀏覽器顯示的內容在視覺上發生任何變化。在上面的示例中,已應用 CSS,以便帶有 inert 屬性的元素的任何直接後代都呈現為半透明。

規範

規範
HTML
# dom-inert

瀏覽器相容性

另見