CSSPositionTryDescriptors

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

CSSPositionTryDescriptors 接口定义了表示可在 @position-try at-rule 的 body 中设置的 CSS 描述符列表的属性。

可以通过在方括号表示法中使用属性名，或在点表示法中使用驼峰式命名的属性名（"propertyName"）来访问相应 @position-try at-rule body 中的每个描述符。例如，你可以使用 style["property-name"] 或 style.propertyName 来访问 CSS 属性 "property-name"，其中 style 是一个 CSSPositionTryDescriptors 实例。像 height 这样的单字属性名可以使用任一表示法访问：style["height"] 或 style.height。

注意： CSSPositionTryRule 接口表示一个 @position-try at-rule，而 CSSPositionTryRule.style 属性是该对象的实例。

实例属性

继承其祖先 CSSStyleDeclaration 的属性。

以下属性名（使用方括号表示法访问的 snake-case 和使用点表示法访问的 camel-case）分别代表相应 @position-try at-rule 中描述符的值：

align-self 或 alignSelf: 表示 align-self 描述符值的字符串。
block-size 或 blockSize: 表示 block-size 描述符值的字符串。
bottom: 表示 bottom 描述符值的字符串。
height: 表示 height 描述符值的字符串。
inline-size 或 inlineSize: 表示 inline-size 描述符值的字符串。
inset: 表示 inset 描述符值的字符串。
position-area 或 positionArea: 表示 position-area 描述符值的字符串。
inset-block 或 insetBlock: 表示 inset-block 描述符值的字符串。
inset-block-end 或 insetBlockEnd: 表示 inset-block-end 描述符值的字符串。
inset-block-start 或 insetBlockStart: 表示 inset-block-start 描述符值的字符串。
inset-inline 或 insetInline: 表示 inset-inline 描述符值的字符串。
inset-inline-end 或 insetInlineEnd: 表示 inset-inline-end 描述符值的字符串。
inset-inline-start 或 insetInlineStart: 表示 inset-inline-start 描述符值的字符串。
justify-self 或 justifySelf: 表示 justify-self 描述符值的字符串。
left: 表示 left 描述符值的字符串。
margin: 表示 margin 描述符值的字符串。
margin-block 或 marginBlock: 表示 margin-block 描述符值的字符串。
margin-block-end 或 marginBlockEnd: 表示 margin-block-end 描述符值的字符串。
margin-block-start 或 marginBlockStart: 表示 margin-block-start 描述符值的字符串。
margin-bottom 或 marginBottom: 表示 margin-bottom 描述符值的字符串。
margin-inline 或 marginInline: 表示 margin-inline 描述符值的字符串。
margin-inline-end 或 marginInlineEnd: 表示 margin-inline-end 描述符值的字符串。
margin-inline-start 或 marginInlineStart: 表示 margin-inline-start 描述符值的字符串。
margin-left 或 marginLeft: 表示 margin-left 描述符值的字符串。
margin-right 或 marginRight: 表示 margin-right 描述符值的字符串。
margin-top 或 marginTop: 表示 margin-top 描述符值的字符串。
max-block-size 或 maxBlockSize: 表示 max-block-size 描述符值的字符串。
max-height 或 maxHeight: 表示 max-height 描述符值的字符串。
max-inline-size 或 maxInlineSize: 表示 max-inline-size 描述符值的字符串。
max-width 或 maxWidth: 表示 max-width 描述符值的字符串。
min-block-size 或 minBlockSize: 表示 min-block-size 描述符值的字符串。
min-height 或 minHeight: 表示 min-height 描述符值的字符串。
min-inline-size 或 minInlineSize: 表示 min-inline-size 描述符值的字符串。
min-width 或 minWidth: 表示 min-width 描述符值的字符串。
place-self 或 placeSelf: 表示 place-self 描述符值的字符串。
position-anchor 或 positionAnchor: 表示 position-anchor 描述符值的字符串。
right: 表示 right 描述符值的字符串。
top: 表示 top 描述符值的字符串。
width: 表示 width 描述符值的字符串。

实例方法

没有特定的方法；继承其祖先 CSSStyleDeclaration 的方法。

示例

CSS 包含一个名为 --custom-right 的 @position-try at-rule 以及三个描述符。

css

@position-try --custom-right {
  position-area: right;
  width: 100px;
  margin-left: 10px;
}

const myRules = document.styleSheets[0].cssRules;
const tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption.style); // "[object CSSPositionTryDescriptors]"
console.log(tryOption.style.margin); // "0 0 0 10px"
console.log(tryOption.style["position-area"]); // "right"

规范

规范
CSS 锚点定位 # csspositiontrydescriptors

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年8月20日⁩，由 MDN 贡献者进行修改。

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