在 JavaScript 中动态创建和插入 <style> 标签：循序渐进指南

2024-03-03 15:55:56

在网页开发中，我们经常需要根据不同的情况动态地修改网页的样式，例如根据用户的操作、设备的类型或者其他一些动态条件。这时，我们就需要用到动态创建和插入 <style> 标签的技术。<style> 标签通常位于 HTML 文档的 <head> 部分，用于定义网页的 CSS 样式规则。通过动态创建和插入 <style> 标签，我们可以实现更加灵活和个性化的网页样式控制。

方法一：原生 JavaScript - `document.createElement()`

这种方法利用 JavaScript 的 document.createElement() 方法创建一个 <style> 元素，然后将 CSS 样式规则写入该元素的 innerHTML 属性，最后将该元素添加到文档的 <head> 部分。

// 创建 <style> 元素
const styleElement = document.createElement('style');

// 设置 type 属性
styleElement.type = 'text/css';

// 设置 CSS 规则
styleElement.innerHTML = `
  body {
    background-color: #f0f0f0;
  }
  h1 {
    color: blue;
  }
`;

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

这段代码首先创建了一个 <style> 元素，然后设置了它的 type 属性为 text/css，接着将 CSS 规则写入了 innerHTML 属性。最后，使用 appendChild() 方法将该元素添加到文档的 <head> 部分。这样，我们就成功地动态创建并插入了一个 <style> 标签，并且应用了其中的 CSS 规则。

方法二：原生 JavaScript - `document.createStyleSheet()` (IE only)

document.createStyleSheet() 方法是 Internet Explorer 浏览器特有的方法，用于创建一个样式表对象。我们可以通过该对象添加 CSS 规则。

// 创建样式表对象
const styleSheet = document.createStyleSheet();

// 添加 CSS 规则
styleSheet.addRule('body', 'background-color: #f0f0f0');
styleSheet.addRule('h1', 'color: blue');

这段代码首先使用 document.createStyleSheet() 创建了一个样式表对象，然后使用 addRule() 方法添加了两条 CSS 规则。需要注意的是，这种方法只适用于 Internet Explorer 浏览器，其他浏览器不支持该方法。

方法三：jQuery

如果你在项目中使用了 jQuery 库，那么你可以使用 jQuery 提供的更加简洁的方法来创建和插入 <style> 标签。

// 创建 <style> 元素
const $styleElement = $('<style type="text/css"></style>');

// 设置 CSS 规则
$styleElement.text(`
  body {
    background-color: #f0f0f0;
  }
  h1 {
    color: blue;
  }
`);

// 将 <style> 元素添加到 <head>
$('head').append($styleElement);

这段代码首先使用 jQuery 创建了一个 <style> 元素，并设置了它的 type 属性。然后，使用 text() 方法将 CSS 规则写入该元素。最后，使用 append() 方法将该元素添加到文档的 <head> 部分。

方法的选择

选择哪种方法取决于你的项目需求和浏览器兼容性要求。

如果你需要兼容 Internet Explorer 浏览器，那么可以使用 document.createStyleSheet() 方法。
如果你使用了 jQuery 库，那么可以使用 jQuery 提供的方法，这样代码会更加简洁。
如果你需要兼容所有主流浏览器，那么可以使用 document.createElement() 方法，这是最通用的方法。

常见问题解答

动态创建 <style> 标签有什么优势？

动态创建 <style> 标签可以让我们根据不同的情况动态地修改网页的样式，例如根据用户的操作、设备的类型或者其他一些动态条件。
如何删除动态创建的 <style> 标签？

可以使用 removeChild() 方法将其从文档中移除，例如：
```
document.head.removeChild(styleElement);
```
可以在动态创建的 <style> 标签中使用媒体查询吗？

可以，你可以在 CSS 规则中使用 @media 规则来定义媒体查询。
动态创建的 <style> 标签的优先级是什么？

动态创建的 <style> 标签的优先级与它在文档中的位置有关。如果它在其他 <style> 标签之后，那么它的优先级会更高。
如何调试动态创建的 <style> 标签中的 CSS 规则？

可以使用浏览器的开发者工具来调试动态创建的 <style> 标签中的 CSS 规则，例如 Chrome 浏览器的“Elements”面板和“Console”面板。