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 |
浏览器兼容性
加载中…