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 上檢視此頁面 • 報告此內容的問題