CSSKeyframesRule: length-Eigenschaft

Baseline 2024
Newly available

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die schreibgeschützte length-Eigenschaft der CSSKeyframeRule-Schnittstelle gibt die Anzahl der CSSKeyframeRule-Objekte in ihrer Liste zurück. Sie können dann auf jede Keyframe-Regel direkt über ihren Index auf dem CSSKeyframeRule-Objekt zugreifen.

Wert

Eine nicht-negative ganze Zahl. Sie sollte denselben Wert wie die length der cssRules-Eigenschaft haben.

Beispiele

Das CSS enthält eine keyframes-at-Regel. Dies wird die erste von document.styleSheets[0].cssRules zurückgegebene CSSRule sein. myRules[0] gibt ein CSSKeyframesRule-Objekt zurück. Die cssRules-Eigenschaft gibt eine CSSRuleList zurück, die zwei Regeln enthält.

css
@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
js
const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes.length); // 2

Spezifikationen

Specification
CSS Animations Level 1
# dom-csskeyframesrule-length

Browser-Kompatibilität