CSSImageValue
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 を取得し、文字列化します。
js
// 要素を取得
const button = document.querySelector("button");
// computedStyleMap()ですべての計算済みスタイルを取得
const allComputedStyles = button.computedStyleMap();
// CSSImageValue を返す例
console.log(allComputedStyles.get("background-image"));
console.log(allComputedStyles.get("background-image").toString());
仕様書
Specification |
---|
CSS Typed OM Level 1 # imagevalue-objects |
ブラウザーの互換性
BCD tables only load in the browser