CSSPositionValue

已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。

非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。

CSSPositionValue 接口是 CSS 类型化对象模型 API 的一部分，用于表示需要位置值的 CSS 属性，例如 object-position。

构造函数

CSSPositionValue() 非标准已弃用: 创建一个新的 CSSPositionValue 对象。

实例属性

CSSPositionValue.x 非标准已弃用: 返回项目在网页水平轴上的位置。
CSSPositionValue.y 非标准已弃用: 返回项目在垂直轴上的位置。

实例方法

无。

示例

以下示例将一个容器 <div> 定位在距离页面顶部 5 像素、距离页面左侧 10 像素的位置。

const replacedEl = document.getElementById("image");
const 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"));

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

#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="mdn.svg" alt="MDN Logo" />

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2023年2月19日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题