CSSImageValue - 表示接受图像的属性的值

CSSImageValue 是 CSS 类型对象模型 API 的接口，表示接受图像的属性的值，例如 background-image，list-style-image 或 border-image-source。CSSImageValue 对象表示包含 URL 的 <image>，例如 url() 或 image()，但不包含 linear-gradient() 或 element()。

属性

无。

方法

无。

实例

我们创建一个元素

<button>魔法棒</button>

我们添加了一些 CSS，包括要求二进制文件的背景图片：

button {
  display: inline-block;
  min-height: 100px; min-width: 100px;
  background: no-repeat 5% center url(https://uploads-10001577.cos.ap-shanghai.myqcloud.com/42e1e9892c8b0ce7.png) aqua;
}

我们得到了元素的样式图。然后，我们从样式表中获取背景图像并对其进行字符串化：

// 得到元素
const button = document.querySelector( 'button' ); 

// 使用 computedStyleMap()  检索所有计算出的样式
const allComputedStyles = button.computedStyleMap(); 

// 返回 CSSImageValue 实例
console.log( allComputedStyles.get('background-image') );
console.log( allComputedStyles.get('background-image').toString() );

<style>
button {
  display: inline-block;
  min-height: 100px; min-width: 100px;
  background: no-repeat 5% center url(https://uploads-10001577.cos.ap-shanghai.myqcloud.com/42e1e9892c8b0ce7.png) aqua;
}
</style>

<button>魔法棒</button>

<script>
// 得到元素
const button = document.querySelector( 'button' ); 

// 使用 computedStyleMap()  检索所有计算出的样式
const allComputedStyles = button.computedStyleMap(); 

// 返回 CSSImageValue 实例
console.log( allComputedStyles.get('background-image') );
console.log( allComputedStyles.get('background-image').toString() );
</script>

尝试一下 »

规范

规范	状态	备注
CSS Typed OM Level 1 CSSImageValue 的定义	工作草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• CSSKeywordValue
• CSSNumericValue
• CSSPositionValue
• CSSTransformValue
• CSSUnparsedValue