使用 vanilla JS 添加 CSS 规则的最短方法答案

【问题标题】：Shortest way to add CSS rules with vanilla JS使用 vanilla JS 添加 CSS 规则的最短方法
【发布时间】：2019-06-30 12:31:40
【问题描述】：

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

[hidden]{ display:none !important }

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

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

【问题讨论】：

在 JS 文件中创建样式表，然后创建 script 标签。 InnerText 样式表并将子元素附加到head

标签： javascript html css

【解决方案1】：

这是我得到的最短的，请尽量缩短。

const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML = s;

// Usage:
addCSS("[hidden]{ display:none !important }");

【讨论】：

您可以删除 CSS 规则中的空格：“[hidden]{display:none!important}”和等号周围。（是的，我知道；）

【解决方案2】：

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

示例：

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

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

示例：

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

&lt;div class="container"&gt;&lt;/div&gt;

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

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

示例：

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

&lt;div class="container"&gt;&lt;/div&gt;

【讨论】：

不错的黑客，不知道他们。不确定它是否完全回答了 OP。