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

浏览器兼容性

另见