在此页

• 构造函数
• 特性
• 方法
• 范例
• 浏览器兼容性
• 另请参阅
• 相关话题

过时
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

CSSPositionValue 接口的 CSS Typed Object Model API represents values for properties that take a position, for example object-position .

构造函数

CSSPositionValue.CSSPositionValue()

创建新的 CSSPositionValue 对象。

特性

CSSPositionValue.x

Returns the item's position along the web page's horizontal axis.

CSSPositionValue.y

Returns the item's position along the vertical axis.

方法

None.

范例

The following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page.

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

We set the object-position property, then check the values returned.

#image {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #dededf;
  object-fit: none;
}
					

<p>Check the developer tools to see the log in the console and to inspect the style attribute on the image.</p>
<img id="image" src="https://yari-demos.prod.mdn.mozit.cloud/files/12668/MDN.svg" alt="MDN Logo"/>
					

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
CSSPositionValue	Chrome 66	Edge 79	Firefox No	IE No	Opera 53	Safari No	WebView Android 66	Chrome Android 66	Firefox Android No	Opera Android 47	Safari iOS No	Samsung Internet Android 9.0
CSSPositionValue() 构造函数	Chrome 66	Edge 79	Firefox No	IE No	Opera 53	Safari No	WebView Android 66	Chrome Android 66	Firefox Android No	Opera Android 47	Safari iOS No	Samsung Internet Android 9.0
x	Chrome 66	Edge 79	Firefox No	IE No	Opera 53	Safari No	WebView Android 66	Chrome Android 66	Firefox Android No	Opera Android 47	Safari iOS No	Samsung Internet Android 9.0
y	Chrome 66	Edge 79	Firefox No	IE No	Opera 53	Safari No	WebView Android 66	Chrome Android 66	Firefox Android No	Opera Android 47	Safari iOS No	Samsung Internet Android 9.0

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

另请参阅

• CSSImageValue
• CSSKeywordValue
• CSSNumericValue
• CSSTransformValue
• CSSUnparsedValue
• Using the CSS Typed OM
• CSS Typed Object Model API

元数据

• 最后修改： Dec 9, 2019

相关话题

1. CSSPositionValue
2. 构造函数

   1. CSSPositionValue()
3. 特性

   1. x
   2. y