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 August 2016.

CSSKeyframeRule 接口的 deleteRule() 方法用于删除与指定关键帧选择器匹配的 CSSKeyFrameRule

语法

js
deleteRule(select)

参数

select

一个字符串,包含要删除规则的关键帧选择器,必须是:

  • 0% 到 100% 之间的百分比值的逗号分隔列表;
  • 关键字 fromto

注意,指定关键帧选择器中的值的数量和顺序必须与目标关键帧规则的值匹配。空白字符会被忽略。

返回值

无(undefined)。

示例

以下 CSS 包含一个关键帧 at 规则。这将是 document.styleSheets[0].cssRules 返回的第一个 CSSRulemyRules[0] 返回一个 CSSKeyframesRule 对象。其 cssRules 属性会得到包含两个规则的 CSSRuleList

使用 deleteRule() 删除规则后,cssRules 属性返回的 CSSRuleList 只会包含一个规则。

css
@keyframes slide-in {
  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); // 只包含一个规则的 CSSRuleList 对象

规范

Specification
CSS Animations Level 1
# dom-csskeyframesrule-deleterule

浏览器兼容性