HTMLElement: inert 属性

基线 2023

新功能

自 2023 年 4 月起，此功能在最新的设备和浏览器版本中运行。此功能可能无法在旧设备或浏览器中运行。

该 HTMLElement 属性 inert 反映了元素的 inert 属性的值。这是一个布尔值，当存在时，会使浏览器“忽略”元素的用户输入事件，包括焦点事件和辅助技术的事件。浏览器也可能忽略元素中的页面搜索和文本选择。这在构建 UI（如模态框）时非常有用，在模态框可见时，您希望“捕获”模态框内的焦点。

注意： 不要在具有 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，以便具有惰性属性的元素的任何直接后代都会呈现为半透明状态。

规范

规范
HTML 标准
# dom-inert

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见