如何使用JavaScript创建CSS样式并向文档中添加自定义CSS规则？

完全可以，常见有两种实现方式：

• 方案1：动态创建style标签（兼容性最优）
  这是最易上手、适配所有主流浏览器的方案，直接把你要定义的CSS规则写入style标签再插入页面即可：

// 创建style标签
const customStyle = document.createElement('style');
// 写入自定义CSS规则
customStyle.textContent = `
.why {
  /* 在这里写你需要的样式属性 */
  background: #eee;
  padding: 10px;
}
html {
  filter: invert(100%);
  pointer: something;
}
`;
// 插入到页面头部，规则立即生效
document.head.appendChild(customStyle);

规则生效后，所有匹配.why选择器的元素都会自动应用对应样式，哪怕是后续用JS新增的元素、或者给现有元素添加对应类名，样式也会自动生效。

• 方案2：使用CSSStyleSheet API（适合动态管理规则）
  如果需要后续频繁增删修改已添加的CSS规则，可以用浏览器原生提供的样式表操作API：

// 优先获取已有的样式表，不存在的话可以先创建一个空style标签插入再获取
const styleSheet = document.styleSheets[0] ?? document.head.appendChild(document.createElement('style')).sheet;
// 插入规则：第一个参数是完整CSS规则，第二个参数是插入的位置索引
styleSheet.insertRule('.why { background: #eee; padding: 10px; }', 0);

// 如需删除规则，传入对应索引即可
// styleSheet.deleteRule(0);

内容的提问来源于stack exchange，提问作者hecker hecker