CSSPositionValue - 表示具有位置的属性的值

CSSPositionValue 是 CSS 类型对象模型 API 的接口，表示具有位置的属性的值，例如 object-position。

构造函数

CSSPositionValue.CSSPositionValue()

创建一个新的 CSSPositionValue 对象。

属性

CSSPositionValue.x

返回项目在网页水平轴上的位置。

CSSPositionValue.y

返回项目在垂直轴上的位置。

方法

无。

实例

以下实例将一个 <div> 容器放置在距离页面顶部 5 像素，页面左侧 10 像素。

接着我们设置 object-position 属性，然后检查返回的值。

<style>
#image {
  width: 375px;
  height: 200px;
  border: 1px solid black;
  background-color: #dededf;
  object-fit: none;
}
</style>

<p>检查开发人员工具以查看控制台中的日志，并检查图像上的样式属性。</p>
<img id="image" src="https://uploads-10001577.cos.ap-shanghai.myqcloud.com/images/logo.png" alt="Logo"/>

<script>
let replacedEl = document.getElementById( 'image' );
let position = new CSSPositionValue( CSS.px(35), CSS.px(40) );

replacedEl.attributeStyleMap.set( 'object-position', position ); 
console.log( position.x.value, position.y.value ); 
console.log( replacedEl.computedStyleMap().get('object-position') );
</script>

尝试一下 »

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• CSSImageValue
• CSSKeywordValue
• CSSNumericValue
• CSSTransformValue
• CSSUnparsedValue
• 使用 CSS 类型的 OM
• CSS 类型对象模型 API