CSSImageValue

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

CSSImageValue は CSS 型付きオブジェクトモデル API のインターフェイスで、 background-image, list-style-image, border-image-source のような画像を取るプロパティの値を表します。

CSSImageValue オブジェクトは <image> のうち URL に関わるもの、例えば url() や image() を表しますが、 linear-gradient() や element() は表しません。

プロパティ

なし。

メソッド

CSSStyleValue からメソッドを継承しています。

例

次のような要素を作成します。

html

<button>Magic Wand</button>

バイナリーファイルを要求する背景画像など、いくつかの CSS を追加しています。

css

button {
  display: inline-block;
  min-height: 100px;
  min-width: 100px;
  background: no-repeat 5% center url(magicwand.png) aqua;
}

その要素のスタイルマップを取得します。そして、スタイルマップから background-image を取得し、文字列化します。

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

// computedStyleMap()ですべての計算済みスタイルを取得
const allComputedStyles = button.computedStyleMap();

// CSSImageValue を返す例
console.log(allComputedStyles.get("background-image"));
console.log(allComputedStyles.get("background-image").toString());