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());