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 von CSS-Deskriptoren darstellen, die im Body einer @position-try At-Regel festgelegt werden können.
Jeder Deskriptor im Body der entsprechenden @position-try At-Regel kann entweder mit seinem Eigenschaftsnamen in Klammernotation oder der camel-case Version des Eigenschaftsnamens "propertyName" in Punktnotation zugegriffen werden. Zum Beispiel können Sie auf die CSS-Eigenschaft "property-name" als style["property-name"] oder style.propertyName zugreifen, wobei style eine CSSPositionTryDescriptors Instanz ist. Eine Eigenschaft mit einem Namen mit einem einzigen Wort wie height kann unter Verwendung beider Notationen zugegriffen 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 (zugreifbar mit der Klammernotation) und camel-case (zugreifbar mit der Punktnotation), repräsentieren jeweils den Wert eines Deskriptors in der entsprechenden @position-try At-Regel:
align-selfoderalignSelf-
Ein String, der den Wert eines
align-selfDeskriptors darstellt. block-sizeoderblockSize-
Ein String, der den Wert eines
block-sizeDeskriptors darstellt. bottom-
Ein String, der den Wert eines
bottomDeskriptors darstellt. height-
Ein String, der den Wert eines
heightDeskriptors darstellt. inline-sizeoderinlineSize-
Ein String, der den Wert eines
inline-sizeDeskriptors darstellt. inset-
Ein String, der den Wert eines
insetDeskriptors darstellt. position-areaoderpositionArea-
Ein String, der den Wert eines
position-areaDeskriptors darstellt. inset-blockoderinsetBlock-
Ein String, der den Wert eines
inset-blockDeskriptors darstellt. inset-block-endoderinsetBlockEnd-
Ein String, der den Wert eines
inset-block-endDeskriptors darstellt. inset-block-startoderinsetBlockStart-
Ein String, der den Wert eines
inset-block-startDeskriptors darstellt. inset-inlineoderinsetInline-
Ein String, der den Wert eines
inset-inlineDeskriptors darstellt. inset-inline-endoderinsetInlineEnd-
Ein String, der den Wert eines
inset-inline-endDeskriptors darstellt. inset-inline-startoderinsetInlineStart-
Ein String, der den Wert eines
inset-inline-startDeskriptors darstellt. justify-selfoderjustifySelf-
Ein String, der den Wert eines
justify-selfDeskriptors darstellt. left-
Ein String, der den Wert eines
leftDeskriptors darstellt. margin-
Ein String, der den Wert eines
marginDeskriptors darstellt. margin-blockodermarginBlock-
Ein String, der den Wert eines
margin-blockDeskriptors darstellt. margin-block-endodermarginBlockEnd-
Ein String, der den Wert eines
margin-block-endDeskriptors darstellt. margin-block-startodermarginBlockStart-
Ein String, der den Wert eines
margin-block-startDeskriptors darstellt. margin-bottomodermarginBottom-
Ein String, der den Wert eines
margin-bottomDeskriptors darstellt. margin-inlineodermarginInline-
Ein String, der den Wert eines
margin-inlineDeskriptors darstellt. margin-inline-endodermarginInlineEnd-
Ein String, der den Wert eines
margin-inline-endDeskriptors darstellt. margin-inline-startodermarginInlineStart-
Ein String, der den Wert eines
margin-inline-startDeskriptors darstellt. margin-leftodermarginLeft-
Ein String, der den Wert eines
margin-leftDeskriptors darstellt. margin-rightodermarginRight-
Ein String, der den Wert eines
margin-rightDeskriptors darstellt. margin-topodermarginTop-
Ein String, der den Wert eines
margin-topDeskriptors darstellt. max-block-sizeodermaxBlockSize-
Ein String, der den Wert eines
max-block-sizeDeskriptors darstellt. max-heightodermaxHeight-
Ein String, der den Wert eines
max-heightDeskriptors darstellt. max-inline-sizeodermaxInlineSize-
Ein String, der den Wert eines
max-inline-sizeDeskriptors darstellt. max-widthodermaxWidth-
Ein String, der den Wert eines
max-widthDeskriptors darstellt. min-block-sizeoderminBlockSize-
Ein String, der den Wert eines
min-block-sizeDeskriptors darstellt. min-heightoderminHeight-
Ein String, der den Wert eines
min-heightDeskriptors darstellt. min-inline-sizeoderminInlineSize-
Ein String, der den Wert eines
min-inline-sizeDeskriptors darstellt. min-widthoderminWidth-
Ein String, der den Wert eines
min-widthDeskriptors darstellt. place-selfoderplaceSelf-
Ein String, der den Wert eines
place-selfDeskriptors darstellt. position-anchoroderpositionAnchor-
Ein String, der den Wert eines
position-anchorDeskriptors darstellt. right-
Ein String, der den Wert eines
rightDeskriptors darstellt. top-
Ein String, der den Wert eines
topDeskriptors darstellt. width-
Ein String, der den Wert eines
widthDeskriptors darstellt.
Instanzmethoden
Keine spezifischen Methoden; erbt Methoden von seinem Vorfahren CSSStyleDeclaration.
Beispiele
Das CSS enthält eine @position-try At-Regel mit dem 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> |