Question

我正在尝试将其保持在1KB以下的库。我已经非常接近极限了。我需要添加一个CSS规则来控制显示隐藏行为。

[hidden]{ display:none !important }

HTML页面没有任何样式标签。这只是我需要的规则。我只能用纯JS添加它。我不想要使用el.style.display ='none'更改元素的样式。我想用属性来做。

那么我该如何添加呢，我找到了创建样式元素并将其设置为innerHTML并将其附加到head元素的解决方案。我希望我能得到一个答案/一个hack，也许用更少的字符就能做到。

Answer 1

如果要隐藏具有属性的元素，只需使用属性hidden。

示例：

<div hidden class="container"></div>

如果您不想使用el.style.display = 'none'，也可以使用cssText仅用1个字符串来使用整个样式。

示例：

document.querySelector('.container').style.cssText = 'width: 100vw; height: 100vh; background: rebeccapurple;';

<div class="container"></div>

另一个选择是使用方法CSSStyleSheet.insertRule()。

CSSStyleSheet.insertRule（）方法将新的CSS规则插入到当前的样式表，但有一些限制。

示例：

const css = window.document.styleSheets[0];
css.insertRule(`
  .container {
    width: 100vw;
    height: 100vh;
    background: rebeccapurple;
  }
`, css.cssRules.length);

<div class="container"></div>

Answer 2

这是我得到的最短的，如果可以的话，请缩短它。

((d,e)=>{
  e = d.createElement("style");
  e.innerHTML = "[hidden]{ display:none !important }";
  d.head.appendChild(e)
})(document)

使用香草JS添加CSS规则的最快捷方法

2 个答案: