recursal/MDN huggingface dataset:
IDBTransaction: durability プロパティ
================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`IDBTransaction` の読み取り専用プロパティ **`durability`** は、トランザクションの生成時に設定された永続性のヒントを返します。これは、トランザクションをコミットする際にパフォーマンスを重視するか永続性を重視するかのユーザーエージェントへのヒントです。

このプロパティの値は、`IDBDatabase.transaction()` を用いてトランザクションを生成する際に `options` パラメーターで定義されます。

値
-

以下の `strings` リテラルのいずれかです。

`"strict"`

ユーザーエージェントは、すべての変更が永続的な保存メディアへに正常に書き込まれたことを確認した後でのみ、トランザクションが正常にコミットされたとみなすことができます。

`"relaxed"`

ユーザーエージェントは、すべての変更をオペレーティングシステムに書き込んだ後ただちに、追加の検証を行わず、トランザクションが正常にコミットされたとみなすことができます。

`"default"`

ユーザーエージェントは、保存領域の永続性に関するデフォルトの動作をするべきです。これは、別に指定していないトランザクション用のデフォルトです。

例
-

動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # dom-idbtransaction-durability |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
IDBTransaction: objectStore() メソッド
==================================

`IDBTransaction` インターフェイスの **`objectStore()`** メソッドは、トランザクションの対象に追加済のオブジェクトストアを返します。

同じトランザクションオブジェクトで、同じ名前を指定して呼び出した場合、このメソッドを何回呼び出しても同じ `IDBObjectStore` インスタンスを返します。別のトランザクションオブジェクトで呼び出した場合、別の `IDBObjectStore` インスタンスを返します。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
objectStore(name)
```

### 引数

`name`

要求するオブジェクトストアの名前です。

### 返値

オブジェクトストアにアクセスする用の `IDBObjectStore` オブジェクトを返します。

### 例外

`NotFoundError` `DOMException`

要求されたオブジェクトストアがトランザクションの対象に無いとき投げられます。

`InvalidStateError` `DOMException`

要求が削除されたか取り除かれたソースオブジェクトに対してなされたか、トランザクションが終了済みのとき投げられます。

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、オブジェクトストアにデータを追加します。トランザクションのイベントハンドラーに設定された関数により、成功時または失敗時にトランザクションを開いた結果を報告する点にも注目してください。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)


```js
const note = document.getElementById("notifications");

// IDB データを保存する用の db オブジェクトのインスタンス
let db;

// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // addData() 関数を実行し、データをデータベースに追加する
  addData();
};

function addData() {
  // IDB に挿入できる新しいオブジェクトを生成する
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // トランザクションを開くのに成功したら報告する
  transaction.oncomplete = (event) => {
    note.innerHTML +=
      "<li>トランザクション完了: データベースの変更が完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>トランザクションはエラーのため開けませんでした。アイテムは重複させられません。</li>";
  };

  // トランザクション上でオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアに newItem オブジェクトを追加する
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-objectstore① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キー範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
IDBTransaction: abort イベント
==========================

`abort` イベントは `IndexedDB` のトランザクションがアボートされたとき発火します。

これは、以下のいずれかの理由により起こります。

* 悪い要求 (たとえば、同じキーを 2 回挿入しようとする、キーに一意性制約があるときに同じインデックスキーを挿入するなど)
* 明示的な `abort()` の呼び出し
* 要求の成功ハンドラーやエラーハンドラーにおける補足されなかった例外
* I/O エラー (ディスクが取り外されたり、OS やハードウェアのその他の故障など、実際にディスクに書き込むのに失敗した)
* 制限の超過

これはキャンセル不可のイベントで、対応する `IDBDatabase` オブジェクトにバブリングします。

構文
--

イベント名を `addEventListener()` のようなメソッドで用いるか、イベントハンドラープロパティを設定します。


```js
addEventListener("abort", (event) => {});
onabort = (event) => {};
```

イベント型
-----

汎用の `Event` です。

バブリング
-----

このイベントは `IDBDatabase` にバブリングします。`event.target` プロパティは、バブリング元の `IDBTransaction` オブジェクトへの参照です。

詳しくは、イベントのバブリングとキャプチャリングを参照してください。

例
-

この例ではデータベースを開き (存在しない場合はデータベースを作成し)、トランザクションを開き、`abort` イベントのリスナーを追加し、トランザクションをアボートすることによりイベントを発火させます。


```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベース作成エラー");
  };

  // このデータベース用の objectStore を作成する
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義する
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  const db = DBOpenRequest.result;

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // `abort` のリスナーを追加する
  transaction.addEventListener("abort", () => {
    console.log("トランザクションがアボートされました");
  });

  // トランザクションをアボートする
  transaction.abort();
};
```


同じ例ですが、イベントハンドラーを `onabort` プロパティに代入しています。


```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベース作成エラー");
  };

  // このデータベース用の objectStore を作成する
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義する
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  const db = DBOpenRequest.result;

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // `abort` のリスナーを追加する
  transaction.onabort = (event) => {
    console.log("トランザクションがアボートされました");
  };

  // トランザクションをアボートする
  transaction.abort();
};
```

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* IndexedDB の使用
TextTrack.label
===============

**`label`** は `TextTrack` インターフェイスの読み取り専用プロパティで、このテキストトラックの人間可読なラベルがあれば、それを返します。

値
-

`label` を含む文字列、または空文字列です。

例
-

以下の例では、 `label` の値がコンソールに表示されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.label);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-label-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextTrack.mode
==============

`TextTrack` インターフェイスの **`mode`** プロパティは、テキストトラックのモードを指定して制御する `disabled`, `hidden`, `showing` のいずれかの文字列です。この値を読み取って現在のモードを決定したり、この値を変更してモードを切り替えることができます。

さらに、 Safari で字幕のキューを表示するには、独自の動画プレーヤーコントロールを実装する際に、 **`default`** 論理属性を true に設定する必要があります。

### 値

文字列で、このトラックの現在のモードを示します。以下のいずれかです。

`disabled`

テキストトラックは現在無効になっています。トラックの存在は DOM で公開されていますが、ユーザーエージェントはそれ以外の場合は無視しています。キューはアクティブではなく、イベントは発行されておらず、ユーザーエージェントはトラックのキューを取得しようとしません。テキストトラックが `default` 論理値属性を持っている場合の既定値は `showing` です。

`hidden`

テキストトラックは現在アクティブですが、キューを表示しません。 ユーザーエージェントがまだトラックのキューを取得しようとしていない場合は、すぐに取得します（それにより、トラックの `TextTrack.cues` プロパティが設定されます）。 テキストが表示されていなくても、ユーザーエージェントはアクティブなキューのリストを（トラックの `activeCues` プロパティに）保持しており、イベントは対応する時間に発生します。

`showing`

テキストトラックは現在有効で、表示されています。トラックのキューリストがまだ取得されていない場合は、すぐに取得されるでしょう。 `activeCues` リストは維持されており、イベントは適切な時刻に発行されています。トラックのテキストはスタイル設定とトラックの `kind` に基づいて適切に描画されます。これは、テキストトラックの `default` 論理属性が指定された場合の既定値です。論理値を指定します。

使用上の注意
------

`mode` の既定値は、 `default` 論理値属性が指定されていない場合は `disabled` で、指定されている場合の `mode` の既定値は `showing` です。テキストトラックが `disabled` の状態で読み込まれると、対応する WebVTT ファイルは、状態が `showing` または `hidden` のいずれかに変わるまで読み込まれません。このようにして、キューが実際に必要とされない限り、リソースの取得とメモリの使用は回避されます。

しかし、これは、例えば、ページ読み込み時にキューのいくつかの側面を処理するために `load` イベントを処理している間にトラックのキューに関係するアクションを実行したい場合、トラックモードが最初に `disabled` になっていた場合、キューの読み込みを起動するために `mode` を `hidden` または `showing` のいずれかに変更しなければならないことを意味しています。

モードが `showing` の場合、テキストトラックはその `kind` によって異なる方法で実行されます。 一般に次のとおりです。

* `kind` が `"subtitles"` (字幕) または `"captions"` (キャプション) のトラックは、動画の上にキューを重ねてレンダリングされます。
* `kind` が `"descriptions"` (説明) であるトラックは、視覚的ではない形式で表示されます (例えば、動画においてテキストはアクションを声で説明することがあります)。
* `kind` が `"chapters"`（チャプター）のトラックは、ユーザーエージェントまたはウェブサイトまたはウェブアプリによって、名前付きチャプターをナビゲートするためのインターフェイスを構築して表示するために使用されます。 ここで、リスト内の各キューはメディア内のチャプターを表します。 その後、ユーザーは、キューの開始位置で開始し、キューの終了位置で終了する目的のチャプターに移動できます。
例
-

この例では、キューが終了するたびに動画が自動的に再生を一時停止するように、テキストトラックのキューを設定します。これは、各キューの `pauseOnExit` プロパティを `true` に設定することで実現します。ただし、トラックのキューを確実に利用できるようにするために、まず `mode` を `showing`に設定します。


```js
window.addEventListener("load", (event) => {
  let trackElem = document.querySelector("track");
  let track = trackElem.track;

  track.mode = "showing";

  for (const cue of track.cues) {
    cue.pauseOnExit = true;
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-mode-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebVTT
* `TextTrack`
* `TextTrackList` (en-US)
* `TextTrackCueList`
* `VTTCue`
* `<track>`
* `HTMLTrackElement`
TextTrack.inBandMetadataTrackDispatchType
=========================================

**`inBandMetadataTrackDispatchType`** は `TextTrack` インターフェイスの読み取り専用プロパティで、この `TextTrack` オブジェクトが表すテキストトラックの帯域内メタデータディスパッチ種別を返します。

帯域内メタデータディスパッチ種別とは、帯域内メタデータトラック用にメディアリソースから抽出された文字列のことです。このようなトラックが保有できるメディアリソースの例としては、ウェブ上で放送をストリーミングしているテレビ局が挙げられます。テキストトラックは、広告ターゲティングのためのメタデータ、料理番組中のレシピデータなどの追加情報、ゲーム番組中のトリビアゲームデータを含めるために使用することができます。

この属性の値は、これらのトラックを専用のスクリプトモジュールが読み込まれたときに添付するために使用することができます。

値
-

`inBandMetadataTrackDispatchType` を含む文字列、または空文字列です。

例
-

以下の例では、`inBandMetadataTrackDispatchType`の値がコンソールに表示されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.inBandMetadataTrackDispatchType);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-label-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextTrack.kind
==============

**`kind`** は `TextTrack` インターフェイスの読み取り専用プロパティで、このオブジェクトが表すテキストトラックの種類を返します。 これは、ユーザーエージェントがトラックをどのように処理するかを決定します。

値
-

文字列です。以下のうちの何れかです。

`"subtitles"`

キューは動画に重ねて表示されます。キューの位置は、`TextTrackCue` を継承するオブジェクトのプロパティ、例えば `VTTCue` を使用して制御されます。

`"captions"`

キューは動画に重ねて表示されます。キューの位置は、`TextTrackCue` を継承するオブジェクトのプロパティ、例えば `VTTCue` を使用して制御されます。

`"descriptions"`

キューは非視覚的な方法で利用できます。

`"chapters"`

ユーザーエージェントは、キューを選択することでナビゲートする仕組みを利用できるようにします。

`"metadata"`

メディアデータに関連する追加データで、インタラクティブビューで使用される可能性があるものです。

例
-

以下の例では、以下の例では `kind` の値がコンソールに表示されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.kind);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-kind-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextTrack.addCue()
==================

**`addCue()`** は `TextTrack` インターフェイスのメソッドで、新しいキューをキューのリストへ追加します。

構文
--


```js
addCue(cue)
```

### 引数

`cue`

`TextTrackCue` です。


**メモ:** `TextTrackCue` インターフェイスは、 `VTTCue` などの他のキューインターフェイスの親クラスとして使用される抽象的なクラスです。したがって、キューを追加する場合は `TextTrackCue` を継承したキュー型のいずれかを使用することになります。

### 返値

`undefined` です。

### 例外

`InvalidStateError` `DOMException`

この `TextTrackList` (en-US) のルールが、入力される `TextTrackCue` に適切なルールと一致しない場合に発生します。

例
-

以下の例では、 `addCue()` を使用して、動画のテキストトラックに 2 つのキューを追加しています。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-addcue-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextTrack.cues
==============

**`cues`** は `TextTrack` インターフェイスの読み取り専用プロパティで、トラックのこのすべてのキューが入った `TextTrackCueList` オブジェクトを返します。

値
-

`TextTrackCueList` オブジェクトです。

例
-

以下の例では、 `addCue()` を使用して、動画のテキストトラックに 2 つのキューを追加しています。 `cues` の値はコンソールに表示されます。返された `TextTrackCueList` オブジェクトには、 2 つのキューが格納されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
console.log(track.cues);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-cues-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextTrack.activeCues
====================

**`activeCues`** は `TextTrack` インターフェイスの読み取り専用プロパティで、現在アクティブなキューを列挙した `TextTrackCueList` オブジェクトを返します。

値
-

`TextTrackCueList` オブジェクトです。

例
-

以下の例では、動画に新しい `TextTrack` を追加しています。 `activeCues` はコンソールに表示されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.activeCues);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-activecues-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextTrack.id
============

**`id`** は `TextTrack` インターフェイスの読み取り専用プロパティで、このトラックの ID があれば、それを返します。

値
-

ID の入った文字列、または空文字列です。

例
-

以下の例では、`id` の値がコンソールに表示されます。


```js
const video = document.querySelector("video");
const track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.id);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-id-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextTrack.removeCue()
=====================

**`removeCue()`** は `TextTrack` インターフェイスのメソッドで、キューのリストからキューを取り除きます。

構文
--


```js
removeCue(cue)
```

### 引数

`cue`

`TextTrackCue` です。

### 返値

`undefined` です。

### 例外

`NotFoundError` `DOMException`

指定されたキューがキューのリストに見つからなかった場合に発生します。


**メモ:** `TextTrackCue` インターフェイスは、 `VTTCue` などの他のキューインターフェイスの親クラスとして使用される抽象的なクラスです。したがって、キューを追加する場合は `TextTrackCue` を継承したキュー型のいずれかを使用することになります。

例
-

以下の例では、`addCue()` を使用して動画のテキストトラックにキューを追加し、`removeCue` を使用してキューを削除しています。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
let cue = new VTTCue(0, 0.9, "Hildy!");
track.addCue(cue);
track.removeCue(cue);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-removecue-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextTrack: cuechange イベント
=========================

**`cuechange`** イベントは、 `TextTrack` が現在表示しているキューが変更されたときに発生します。このイベントは、表示されているものがあれば、 `TextTrack` および `HTMLTrackElement` の両方に発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("cuechange", (event) => {});

oncuechange = (event) => {};
```

イベント型
-----

一般的な `Event` で、追加のプロパティはありません。

例
-

`cuechange` イベントのリスナーを `TextTrack` に設定するには、 `addEventListener()` メソッドを使用します。


```js
track.addEventListener("cuechange", () => {
  const cues = track.activeCues; // 現在のキューの配列
  // …
});
```


あるいは、 `oncuechange` イベントハンドラープロパティを設定しても構いません。


```js
track.oncuechange = (event) => {
  let cues = track.activeCues; // 現在のキューの配列
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-cuechange |
| HTML Standard # handler-texttrack-oncuechange |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebVTT
* `HTMLTrackElement` における同一のイベント: `cuechange`
TextTrack.language
==================

**`language`** は `TextTrack` インターフェイスの読み取り専用プロパティで、このテキストトラックの言語を返します。

これは HTML の `lang` 属性と同じ値を使用します。これらの値は RFC 5646: Tags for Identifying Languages (BCP 47 とも) で文書化されています。

値
-

言語識別子を格納した文字列。例: 米国英語なら `"en-US"` 、ブラジルポルトガル語なら `"pt-BR"` 。

例
-

以下の例では、 `language` の値がコンソールに表示されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en-US");
track.mode = "showing";
console.log(track.language);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-language-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly.has()
==============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`has()`** は `StylePropertyMapReadOnly` インターフェイスのメソッドで、指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。

構文
--


```js
var boolean = StylePropertyMapReadOnly.has(property);
```

### 引数

property

プロパティの名前です。

### 返値

論理値です。

例
-

ここでは、 `has()` メソッドを使用して、 padding-top プロパティが button 要素の style 属性に存在するかどうかを確認します。


```js
// button 要素を取得
const buttonEl = document.querySelector('.example');

// style 属性内のものを attributeStyleMap および has() で検索
const hasPadTop = buttonEl.attributeStyleMap.has('padding-top);

console.log(hasPadTop); // padding-top が style 属性にあれば true を記録
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-has |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly.get()
==============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`get()`** は `StylePropertyMapReadOnly` インターフェイスのメソッドで、指定されたプロパティの最初の値を `CSSStyleValue` で返します。

構文
--


```js
var declarationBlock = StylePropertyMapReadOnly.get(property);
```

### 引数

property

値を取得するプロパティの名前です。

### 返値

`CSSStyleValue` オブジェクトです。

例
-

少しだけ、プロパティと値を取得してみましょう。まず、 HTML の段落の中にリンクを作成し、 JavaScript で入力する定義リストを追加しましょう。


```html
<p>
  <a href="https://example.com">リンク</a>
</p>
<dl id="results"></dl>
```


カスタムプロパティや継承可能なプロパティなど、ちょっとした CSS を追加しています。


```css
p {
  font-weight: bold;
}
a {
  --color: red;
  color: var(--color);
}
```


Element インターフェイスの `computedStyleMap()` を使用して、 *StylePropertyMapReadOnly* オブジェクトを返します。興味のあるプロパティの配列を作成し、 StylePropertyMapReadOnly の `get()` メソッドを使用してそれらの値のみを取得します。


```js
// 要素を取得
const myElement = document.querySelector("a");

// すべての計算済みスタイルを `computedStyleMap` で受け取る
const styleMap = myElement.computedStyleMap();

// 入力する <dl> を取得
const stylesList = document.querySelector("#results");

// 関心のあるプロパティのリスト
const ofInterest = ["font-weight", "border-left-color", "color", "--color"];

// 関心のあるプロパティを反復処理
for (let i = 0; i < ofInterest.length; i++) {
  // プロパティ
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = ofInterest[i];
  stylesList.appendChild(cssProperty);

  // 値
  const cssValue = document.createElement("dd");
  // use get() to find the value
  cssValue.innerText = styleMap.get(ofInterest[i]);
  stylesList.appendChild(cssValue);
}
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-get |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS 型付きオブジェクトモデル API (en-US)
* Houdini の学習: CSS 型付きオブジェクトモデル (en-US)
StylePropertyMapReadOnly.values()
=================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`StylePropertyMapReadOnly.values()`** メソッドは、 `StylePropertyMapReadOnly` オブジェクトのそれぞれのインデックスに対応する値を含む新しい*配列イテレーター*を返します。

構文
--


```js
StylePropertyMapReadOnly.values();
```

### 引数

なし。

### 返値

新しい `Array` です。

例
-

この例では、 `values()` メソッドを使用して `Element.computedStyleMap()` の中にある値にアクセスすることができます。


```js
// button 要素を取得
const buttonEl = document.querySelector("button");

// すべての計算済みスタイルを `computedStyleMap` で受け取る
const allComputedStyles = buttonEl.computedStyleMap();

// values は CSS 値の反復可能なリストを返す
const vals = allComputedStyles.values();
console.log(vals.next().value); // CSSStyleValue を返す
```

仕様書
---

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly.getAll()
=================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`getAll()`** は `StylePropertyMapReadOnly` インターフェイスのメソッドで、指定されたプロパティの値を含む `CSSStyleValue` オブジェクトの配列を返します。

構文
--


```js
var cssStyleValues[] = StylePropertyMapReadOnly.getAll(property)
```

### 引数

property

すべての値を取得するプロパティの名前です。

### 返値

`CSSStyleValue` オブジェクトの配列です。

例
-

以下の例では、 `getAll()` を使用して `background-image` プロパティに対して使用しています。宣言されているそれぞれの背景画像の項目が入った `Array` を返します。


```js
// button 要素を取得
const buttonEl = document.querySelector("button");

// `computedStyleMap` ですべての計算済みスタイルが取得できます
const allComputedStyles = buttonEl.computedStyleMap();

// getAll() を background-image プロパティに対して使用
const allBkImages = allComputedStyles.getAll("background-image");
console.log(allBkImages); // それぞれの背景画像を項目とした配列を出力
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-getall |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly.entries()
==================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`StylePropertyMapReadOnly.entries()`** メソッドは、このオブジェクトが持つ列挙可能なプロパティの `[key, value]` の組の配列を、 `for...in` ループで提供されるのと同じ順序で返します（違いは for-in ループではプロトタイプチェーン内のプロパティも列挙する点です）。

構文
--


```js
StylePropertyMapReadOnly.entries();
```

### 引数

なし。

### 返値

この `StylePropertyMapReadOnly` オブジェクトが持つ列挙可能な `[key, value]` の組の配列です。

例
-

こちらは、 `StylePropertyMapReadOnly.entries()` メソッドを使用して要素の計算済みスタイルを取得する例です。


```js
// DOM 要素を取得
const buttonEl = document.querySelector("button");

// `computedStyleMap` ですべての計算済みスタイルが取得できます
const allComputedStyles = buttonEl.computedStyleMap();

// entries は項目の反復可能オブジェクトを返します
const iterableStyles = allComputedStyles.entries();

// align-content を最初の項目、 CSSStyleValue を 2 番目の項目とする 2 項目の配列を返します。
console.log(iterableStyles.next().value);
```

仕様書
---

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.entries`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.