CSSKeyframesRule: deleteRule() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

deleteRule()CSSKeyframeRule インターフェイスのメソッドで、指定されたキーフレームセレクターに一致する CSSKeyFrameRule を削除します。

構文

js
deleteRule(select)

引数

select

削除するルールのキーフレームセレクターの入った文字列です。次のうちのいずれかを指定します。

  • 0% から 100% までのパーセント値をカンマで区切ったリスト
  • または fromto のキーワード

なお、指定するキーフレームセレクターの値の数と順序は、対象となるキーフレームルールのものと一致していなければなりません。ホワイトスペースは無視されます。

返値

なし (undefined)。

この CSS には keyframes アットルールがあります。これは document.styleSheets[0].cssRules で返される最初の CSSRule になります。 myRules[0]CSSKeyframesRule オブジェクトを返します。 cssRules プロパティは 2 つのルールを持った CSSRuleList を返します。

deleteRule() でルールを 1 つ削除した後は、 cssRules プロパティはルールを 1 つ持った CSSRuleList を返します。

css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // CSSKeyframesRule
keyframes.deleteRule("to");
console.log(keyframes.cssRules); // 1 つのルールを持った CSSRuleList を返す

仕様書

Specification
CSS Animations Level 1
# dom-csskeyframesrule-deleterule

ブラウザーの互換性

BCD tables only load in the browser