CSSPositionTryDescriptors
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das CSSPositionTryDescriptors
Interface definiert Eigenschaften, die die Liste der CSS-Deskriptoren darstellen, die im Hauptteil einer @position-try
At-Regel gesetzt werden können.
Jeder Deskriptor im Hauptteil der entsprechenden @position-try
At-Regel kann entweder über seinen Eigenschaftsnamen in Bracket-Notation oder über die Camel-Case-Version des Eigenschaftsnamens "propertyName" in Punkt-Notation zugegriffen werden. Zum Beispiel können Sie auf die CSS-Eigenschaft "property-name" als style["property-name"]
oder style.propertyName
zugreifen, wobei style
eine Instanz von CSSPositionTryDescriptors
ist. Eine Eigenschaft mit einem einwortigen Namen wie height
kann mit beiden Notationen angesprochen werden: style["height"]
oder style.height
.
Hinweis:
Das CSSPositionTryRule
Interface repräsentiert eine @position-try
At-Regel, und die CSSPositionTryRule.style
Eigenschaft ist eine Instanz dieses Objekts.
Instanzeigenschaften
Erbt Eigenschaften von seinem Vorfahren CSSStyleDeclaration
.
Die folgenden Eigenschaftsnamen, in Snake-Case (zugänglich mit Bracket-Notation) und Camel-Case (zugänglich mit Punkt-Notation), repräsentieren jeweils den Wert eines Deskriptors in der entsprechenden @position-try
At-Regel:
align-self
oderalignSelf
-
Ein String, der den Wert eines
align-self
Deskriptors repräsentiert. block-size
oderblockSize
-
Ein String, der den Wert eines
block-size
Deskriptors repräsentiert. bottom
-
Ein String, der den Wert eines
bottom
Deskriptors repräsentiert. height
-
Ein String, der den Wert eines
height
Deskriptors repräsentiert. inline-size
oderinlineSize
-
Ein String, der den Wert eines
inline-size
Deskriptors repräsentiert. inset
-
Ein String, der den Wert eines
inset
Deskriptors repräsentiert. position-area
oderpositionArea
-
Ein String, der den Wert eines
position-area
Deskriptors repräsentiert. inset-block
oderinsetBlock
-
Ein String, der den Wert eines
inset-block
Deskriptors repräsentiert. inset-block-end
oderinsetBlockEnd
-
Ein String, der den Wert eines
inset-block-end
Deskriptors repräsentiert. inset-block-start
oderinsetBlockStart
-
Ein String, der den Wert eines
inset-block-start
Deskriptors repräsentiert. inset-inline
oderinsetInline
-
Ein String, der den Wert eines
inset-inline
Deskriptors repräsentiert. inset-inline-end
oderinsetInlineEnd
-
Ein String, der den Wert eines
inset-inline-end
Deskriptors repräsentiert. inset-inline-start
oderinsetInlineStart
-
Ein String, der den Wert eines
inset-inline-start
Deskriptors repräsentiert. justify-self
oderjustifySelf
-
Ein String, der den Wert eines
justify-self
Deskriptors repräsentiert. left
-
Ein String, der den Wert eines
left
Deskriptors repräsentiert. margin
-
Ein String, der den Wert eines
margin
Deskriptors repräsentiert. margin-block
odermarginBlock
-
Ein String, der den Wert eines
margin-block
Deskriptors repräsentiert. margin-block-end
odermarginBlockEnd
-
Ein String, der den Wert eines
margin-block-end
Deskriptors repräsentiert. margin-block-start
odermarginBlockStart
-
Ein String, der den Wert eines
margin-block-start
Deskriptors repräsentiert. margin-bottom
odermarginBottom
-
Ein String, der den Wert eines
margin-bottom
Deskriptors repräsentiert. margin-inline
odermarginInline
-
Ein String, der den Wert eines
margin-inline
Deskriptors repräsentiert. margin-inline-end
odermarginInlineEnd
-
Ein String, der den Wert eines
margin-inline-end
Deskriptors repräsentiert. margin-inline-start
odermarginInlineStart
-
Ein String, der den Wert eines
margin-inline-start
Deskriptors repräsentiert. margin-left
odermarginLeft
-
Ein String, der den Wert eines
margin-left
Deskriptors repräsentiert. margin-right
odermarginRight
-
Ein String, der den Wert eines
margin-right
Deskriptors repräsentiert. margin-top
odermarginTop
-
Ein String, der den Wert eines
margin-top
Deskriptors repräsentiert. max-block-size
odermaxBlockSize
-
Ein String, der den Wert eines
max-block-size
Deskriptors repräsentiert. max-height
odermaxHeight
-
Ein String, der den Wert eines
max-height
Deskriptors repräsentiert. max-inline-size
odermaxInlineSize
-
Ein String, der den Wert eines
max-inline-size
Deskriptors repräsentiert. max-width
odermaxWidth
-
Ein String, der den Wert eines
max-width
Deskriptors repräsentiert. min-block-size
oderminBlockSize
-
Ein String, der den Wert eines
min-block-size
Deskriptors repräsentiert. min-height
oderminHeight
-
Ein String, der den Wert eines
min-height
Deskriptors repräsentiert. min-inline-size
oderminInlineSize
-
Ein String, der den Wert eines
min-inline-size
Deskriptors repräsentiert. min-width
oderminWidth
-
Ein String, der den Wert eines
min-width
Deskriptors repräsentiert. place-self
oderplaceSelf
-
Ein String, der den Wert eines
place-self
Deskriptors repräsentiert. position-anchor
oderpositionAnchor
-
Ein String, der den Wert eines
position-anchor
Deskriptors repräsentiert. right
-
Ein String, der den Wert eines
right
Deskriptors repräsentiert. top
-
Ein String, der den Wert eines
top
Deskriptors repräsentiert. width
-
Ein String, der den Wert eines
width
Deskriptors repräsentiert.
Instanzmethoden
Keine spezifischen Methoden; erbt Methoden von seinem Vorfahren CSSStyleDeclaration
.
Beispiele
Das CSS enthält eine @position-try
At-Regel mit einem Namen --custom-right
und drei Deskriptoren.
@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"
Spezifikationen
Specification |
---|
CSS Anchor Positioning> # csspositiontrydescriptors> |
Browser-Kompatibilität
Loading…