このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
HTMLElement: inert プロパティ
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年4月.
* Some parts of this feature may have varying levels of support.
HTMLElement のinert プロパティは、この要素のinert 属性の値を反映します。論理値で、存在する場合は、フォーカスイベントや支援技術からのイベントを含む、要素に対するユーザーの入力イベントをブラウザーが「無視」するようにします。ブラウザーは、要素でのページ検索やテキスト選択も無視することができます。これは、モーダルのような UI を構築する際に、モーダルが表示されているときにフォーカスをモーダル内に「閉じ込める」場合に便利です。
メモ:対話要素や重要なコンテンツをinert 属性を持つ要素内に入れ子にしてはいけません。不活性コンテンツとその子孫は、すべてのユーザーにとってフォーカスも知覚もできないからです。
In this article
値
論理値で、その要素が不活性である場合はtrue、それ以外の場合はこの値はfalse になります。
例
>HTML
<div> <label for="button1">ボタン 1</label> <button>不活性ではありません</button></div><div inert> <label for="button2">ボタン 2</label> <button>不活性です</button></div>CSS
[inert] > * { opacity: 0.5;}結果
メモ:この属性は、それ自体では、ブラウザーに表示されるコンテンツは視覚的変化を与えません。上の例では、inert 属性を持つ要素の直系の子孫が半透明になるように CSS が適用されています。
仕様書
| Specification |
|---|
| HTML> # dom-inert> |