删除由 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 评论

好吧，但这会删除整个 CSS，但我只想删除属性背景。

你可以从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 添加规则时，它将返回添加属性的索引。您可以使用相同的索引通过 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);