Javascript 设置 CSS使用 JavaScript 设置 CSS 样式

3 非常有趣。谢谢你的提示 ;)

style.setContent 错误❌

假设你有一个段落。

<p id="target">rainbow 🌈</p>

并且您需要使用 JS 更改它的颜色。您有什么选择？

1. 内联样式

最直接的方法是：从 DOM 查询元素并更改其内联样式。

document.getElementById('target').style.color = 'tomato';

短小而简单。

2. 全局样式

另一种选择是创建<style>标签，用 CSS 规则填充它并将标签附加到 DOM。

  var style = document.createElement('style');
  style.innerHTML = `
  #target {
  color: blueviolet;
  }
  `;
  document.head.appendChild(style);

3. CSSOM 插入规则

第三个选项不太为人所知。我们将使用CSSStyleSheet insertRule方法。

  var style = document.createElement('style');
  document.head.appendChild(style);
  style.sheet.insertRule('#target {color: darkseagreen}');

虽然它看起来与第二个选项类似，但绝对是不同的。

正如您在 Chrome DevTools 中看到的，<style>标签为空，但样式（darkseagreen 颜色）已应用于元素。此外，由于 Chrome 不允许编辑动态 CSS 样式，因此无法通过 DevTools 更改颜色。

实际上，这种行为正是我撰写这篇文章的动机。一个流行的 CSS-in-JS 库Styled Components出于性能方面的考虑，在生产模式下使用此功能注入样式。此功能在某些项目或环境中可能并不受欢迎，有些人会在项目问题中抱怨它。

4. 可构造样式表（2019 年 7 月更新）

现在可以CSSStyleSheet从 JavaScript 创建对象。

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('#target {color: darkseagreen}');

// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];

更多详情请见此处。
此选项仅对 Chrome 有效，请谨慎使用。

你知道其他用 JavaScript 添加样式的方法吗？你最近更喜欢用哪个？

感谢阅读！