如何使用标签和@import实现动态样式注入

使用link标签和@import规则可实现前端动态样式注入。通过DOM操作添加或替换link元素，适合加载完整CSS文件；而@import需置于CSS开头，用于内部依赖管理但性能较差。示例中封装loadStyle函数动态创建link标签实现主题切换，importStyle函数则通过style标签内写入@import语句加载模块化样式。两者均通过设置id便于维护。配合disabled属性控制启用/禁用，或调用remove方法移除样式，避免重复加载。实际应用中，link更优，@import适用于细粒度CSS组织，合理选择可提升灵活性与维护性。

在现代前端开发中，动态样式注入是一种灵活控制页面外观的方式。通过 标签 和 CSS 的 @import 规则，可以按需加载或切换样式，实现主题切换、模块化样式管理等需求。

使用 link 标签动态注入样式

通过操作 DOM 动态添加或替换 <link> 标签，是最常见且兼容性良好的方式。

说明：浏览器会自动解析并应用 link 引入的外部样式表，适合加载完整的 CSS 文件。

• 创建 link 元素并设置 rel 和 href 属性
• 指定 id 便于后续更新或移除
• 插入到 head 中触发加载

代码示例：

function loadStyle(url, id) {
  let link = document.getElementById(id);
  if (link) {
    link.href = url;
    return;
  }
  link = document.createElement('link');
  link.id = id;
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = url;
  document.head.appendChild(link);
}

// 调用
loadStyle('/themes/dark.css', 'theme-style');

使用 @import 在 CSS 中导入样式

CSS 的 @import 规则允许在一个样式表中引入另一个样式表。可在 style 标签或已有 CSS 文件中使用。

Otter.ai

一个自动的会议记录和笔记工具，会议内容生成和实时转录

下载

注意：@import 必须放在文件开头，否则无效。性能上不如直接 link，因为是串行加载。

• 创建 style 标签
• 写入包含 @import 的 CSS 内容
• 插入页面生效

代码示例：

function importStyle(cssPath, id) {
  let style = document.getElementById(id);
  if (style) {
    style.innerHTML = `@import url('${cssPath}');`;
    return;
  }
  style = document.createElement('style');
  style.id = id;
  style.innerHTML = `@import url('${cssPath}');`;
  document.head.appendChild(style);
}

// 调用
importStyle('/components/button.css', 'btn-style');

动态切换与移除样式的技巧

为了实现真正的“动态”，除了注入，还要能控制样式是否生效。

• 通过修改 link 的 disabled 属性来启用/禁用
• 用 remove() 删除已插入的 link 或 style 标签
• 维护一个样式管理映射，避免重复加载

例如：

function removeStyle(id) {
  const el = document.getElementById(id);
  if (el) el.remove();
}