HTMLElement: inert 屬性
Baseline 廣泛可用 *
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 |
瀏覽器相容性
載入中…