js 动态插入 style

JavaScript 动态插入 style 元素是一种常用的方法，用于在运行时修改或添加 CSS 样式。以下是关于这个问题的详细解答：

基础概念

动态插入 style 元素意味着在页面加载后，使用 JavaScript 创建一个新的 <style> 元素，并将其添加到文档的 <head> 部分。这样可以在不刷新页面的情况下改变页面的样式。

优势

灵活性：可以根据用户的交互或其他条件动态地改变样式。
性能：相比于通过类名切换样式，直接操作 style 元素可以减少重绘和回流，提高性能。
便捷性：对于简单的样式更改，不需要编写额外的 CSS 文件或类。

类型

内联样式：直接在 HTML 元素上设置 style 属性。
内部样式表：在 <head> 中使用 <style> 标签定义样式。
外部样式表：通过 <link> 标签引入外部 CSS 文件。

应用场景

主题切换：允许用户在深色模式和浅色模式之间切换。
动画效果：实时应用 CSS 动画或过渡效果。
响应式设计：根据屏幕尺寸或设备类型调整布局。

示例代码

以下是一个简单的例子，展示如何使用 JavaScript 动态插入 style 元素：

// 创建一个新的 <style> 元素
var styleElement = document.createElement('style');
styleElement.type = 'text/css';

// 定义要插入的 CSS 规则
var cssRules = `
  body {
    background-color: lightblue;
  }
  h1 {
    color: darkblue;
  }
`;

// 将 CSS 规则添加到 <style> 元素中
if (styleElement.styleSheet) {
  // 对于 IE 浏览器
  styleElement.styleSheet.cssText = cssRules;
} else {
  // 对于其他浏览器
  styleElement.appendChild(document.createTextNode(cssRules));
}

// 将 <style> 元素添加到文档的 <head> 中
document.head.appendChild(styleElement);