CSSPositionTryDescriptors

可用性有限

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

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表。

CSSPositionTryDescriptors 接口描述一个表示 @position-try at 规则 的对象。

CSSStyleDeclaration CSSPositionTryDescriptors

实例属性

继承自其祖先 CSSStyleDeclaration 的属性。

CSSPositionTryDescriptors 接口定义了表示可以在 @position-try at 规则内设置的 CSS 属性的属性。

有 35 个 CSS 属性可以作为 CSS 属性名称或驼峰式命名法访问。对于每个属性

CSSPositionTryDescriptors.propertyName

使用驼峰式命名的属性名称表示在 @position-try at 规则中设置的属性值。

CSSPositionTryDescriptors["property-name"]

使用 CSS 属性名称表示在 @position-try at 规则中设置的属性值。

实例属性列在下面

CSS 属性 驼峰式命名法 属性名称
align-self CSSPositionTryDescriptors.alignSelf CSSPositionTryDescriptors["align-self"]
block-size CSSPositionTryDescriptors.blockSize CSSPositionTryDescriptors["block-size"]
bottom CSSPositionTryDescriptors.bottom CSSPositionTryDescriptors["bottom"]
height CSSPositionTryDescriptors.height CSSPositionTryDescriptors["height"]
inline-size CSSPositionTryDescriptors.inlineSize CSSPositionTryDescriptors["inline-size"]
inset CSSPositionTryDescriptors.inset CSSPositionTryDescriptors["inset"]
position-area CSSPositionTryDescriptors.positionArea CSSPositionTryDescriptors["position-area"]
inset-block CSSPositionTryDescriptors.insetBlock CSSPositionTryDescriptors["inset-block"]
inset-block-end CSSPositionTryDescriptors.insetBlockEnd CSSPositionTryDescriptors["inset-block-end"]
inset-block-start CSSPositionTryDescriptors.insetBlockStart CSSPositionTryDescriptors["inset-block-start"]
inset-inline CSSPositionTryDescriptors.insetInline CSSPositionTryDescriptors["inset-inline"]
inset-inline-end CSSPositionTryDescriptors.insetInlineEnd CSSPositionTryDescriptors["inset-inline-end"]
inset-inline-start CSSPositionTryDescriptors.insetInlineStart CSSPositionTryDescriptors["inset-inline-start"]
justify-self CSSPositionTryDescriptors.justifySelf CSSPositionTryDescriptors["justify-self"]
left CSSPositionTryDescriptors.left CSSPositionTryDescriptors["left"]
margin CSSPositionTryDescriptors.margin CSSPositionTryDescriptors["margin"]
margin-block CSSPositionTryDescriptors.marginBlock CSSPositionTryDescriptors["margin-block"]
margin-block-end CSSPositionTryDescriptors.marginBlockEnd CSSPositionTryDescriptors["margin-block-end"]
margin-block-start CSSPositionTryDescriptors.marginBlockStart CSSPositionTryDescriptors["margin-block-start"]
margin-bottom CSSPositionTryDescriptors.marginBottom CSSPositionTryDescriptors["margin-bottom"]
margin-inline CSSPositionTryDescriptors.marginInline CSSPositionTryDescriptors["margin-inline"]
margin-inline-end CSSPositionTryDescriptors.marginInlineEnd CSSPositionTryDescriptors["margin-inline-end"]
margin-inline-start CSSPositionTryDescriptors.marginInlineStart CSSPositionTryDescriptors["margin-inline-start"]
margin-left CSSPositionTryDescriptors.marginLeft CSSPositionTryDescriptors["margin-left"]
margin-right CSSPositionTryDescriptors.marginRight CSSPositionTryDescriptors["margin-right"]
margin-top CSSPositionTryDescriptors.marginTop CSSPositionTryDescriptors["margin-top"]
max-block-size CSSPositionTryDescriptors.maxBlockSize CSSPositionTryDescriptors["max-block-size"]
max-height CSSPositionTryDescriptors.maxHeight CSSPositionTryDescriptors["max-height"]
max-inline-size CSSPositionTryDescriptors.maxInlineSize CSSPositionTryDescriptors["max-inline-size"]
max-width CSSPositionTryDescriptors.maxWidth CSSPositionTryDescriptors["max-width"]
min-block-size CSSPositionTryDescriptors.minBlockSize CSSPositionTryDescriptors["min-block-size"]
min-height CSSPositionTryDescriptors.minHeight CSSPositionTryDescriptors["min-height"]
min-inline-size CSSPositionTryDescriptors.minInlineSize CSSPositionTryDescriptors["min-inline-size"]
min-width CSSPositionTryDescriptors.minWidth CSSPositionTryDescriptors["min-width"]
place-self CSSPositionTryDescriptors.placeSelf CSSPositionTryDescriptors["place-self"]
position-anchor CSSPositionTryDescriptors.positionAnchor CSSPositionTryDescriptors["position-anchor"]
right CSSPositionTryDescriptors.right CSSPositionTryDescriptors["right"]
top CSSPositionTryDescriptors.top CSSPositionTryDescriptors["top"]
width CSSPositionTryDescriptors.width CSSPositionTryDescriptors["width"]

实例方法

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

示例

CSS 包含一个名为 --custom-right 且具有三个描述符的 @position-try at 规则。

css
@position-try --custom-right {
  position-area: right;
  width: 100px;
  margin: 0 0 0 10px;
}
js
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

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅