用Javascript设置CSS样式

原文: https://dev.to/karataev/set-css-styles-with-javascript-3nl5

前言

最近查看weblow页面时，发现页面中的某些css在element面板中不能修改，同时导航到最终的style标签，style是空的

image.png
image.png

假设我们有个p标签

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

我们可以通过以下几种方式修改这个段落的颜色

1 inline styles

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

[图片上传失败...(image-e84bb-1589872755479)]

2 Global styles

创建style标签，然后通过写style标签的innerHTML，再append到页面上

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

[图片上传失败...(image-2ff026-1589872755479)]

3. CSSOM insertRule

第三种方法比较少见. 可以使用 CSSStyleSheet insertRule 方法.

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

注意这种方法插入的style，在styles面板中无法修改，因为chrome不让修改 Chrome doesn't allow editing dynamic CSS styles.
通过导航到elements面板中对应的style标签是空的
事实上，这样的行为正是我写这篇文章的动机。一个流行的CSS-in-JS库风格的组件使用这个特性在生产模式中注入样式，因为性能。这个特性在特定的项目或环境中可能是不受欢迎的，有些人会在项目的问题中抱怨它。

[图片上传失败...(image-b5714d-1589872755479)]

4. Constructable Stylesheets (July 2019 update)

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

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

目前只有chrome支持