删除由 insertRule() 添加的 CSS 属性

Question

我用 insertRule 添加了 CSS。现在我想在 1 秒后删除属性 background，使它像以前一样（由 Bootstrap 设置）。

const css = window.document.styleSheets[0];
css.insertRule(`
    .mt-preview .panel-heading {                
        background: yellowgreen !important;
        color: #fff !important;
        transition: all 0.75s;
    }
`, css.cssRules.length);

setTimeout(() => {
  document.querySelector('.mt-preview .panel-heading').style.removeProperty('background');
}, 1000);

我用过 removeProperty() 但这似乎不起作用。我怎样才能删除属性?

Fiddle

Answer 1

您也可以使用 CSSStyleSheet 中的 deleteRule，您只需要知道哪个索引是您要删除的规则。

const css = window.document.styleSheets[0];
css.insertRule(`
    .mt-preview .panel-heading {                
        background: yellowgreen !important;
        color: #fff !important;
        transition: all 0.75s;
    }
`, css.cssRules.length);

setTimeout(() => css.deleteRule(0), 1000) // use 10 in your JSFiddle

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group mt-preview">
  <div class="panel panel-success">
    <div class="panel-heading"><strong>My title</strong></div>
    <div class="panel-body">
      <div class="mt-preview-info">My text</div>
    </div>
  </div>
</div>

更新 - 基于 OP 评论

Well, but that removes the whole CSS but I want to remove the property background only.

您可以使用 ElementCSSInlineStyle.style 中的 style，如下所示：

const heading = document.querySelector('.mt-preview .panel-heading')

heading.style = 'background: yellowgreen; color: #fff; transition: all 0.75s;'

//or
//heading.style.cssText = 'background: yellowgreen; color: #fff; transition: all 0.75s;'

//or
//heading.setAttribute('style', 'background: yellowgreen; color: #fff; transition: all 0.75s;')

setTimeout(() => heading.style.removeProperty('background'), 1000);

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group mt-preview">
  <div class="panel panel-success">
    <div class="panel-heading"><strong>My title</strong></div>
    <div class="panel-body">
      <div class="mt-preview-info">My text</div>
    </div>
  </div>
</div>

Answer 2

您可以使用deleteRule。每当您通过 insertRule 添加规则时，它都会 return 添加属性的索引。您可以使用相同的索引通过 deleteRule 删除属性。

const css = window.document.styleSheets[0];
const index = css.insertRule(`
    .mt-preview .panel-heading {                
        background: yellowgreen !important;
        color: #fff !important;
        transition: all 0.75s;
    }
`, css.cssRules.length);

setTimeout(() => {
 css.deleteRule(index)
}, 1000);

删除由 insertRule() 添加的 CSS 属性

Remove CSS property added by insertRule()

javascript

twitter-bootstrap

twitter-bootstrap-3

更新 - 基于 OP 评论