如何使用 JavaScript 创建样式标签

有时候，我们需要动态地创建样式标签并将其添加到页面中。在这篇文章中，我们将介绍如何使用 JavaScript 创建样式标签。

创建样式标签

在 JavaScript 中，我们可以使用 document.createElement() 方法创建一个标签元素。要创建一个样式标签，我们可以使用以下代码：

const styleTag = document.createElement('style');

设置样式标签内容

要将样式添加到样式标签中，我们需要设置其 textContent 属性。在 textContent 中，我们可以编写我们想要设置的样式。

例如，要为 h1 标签设置字体大小和颜色，我们可以将以下内容添加到 textContent 中：

h1 {
  font-size: 24px;
  color: red;
}

我们可以使用以下代码将样式添加到样式标签中：

styleTag.textContent = 'h1 { font-size: 24px; color: red; }';

添加样式标签到页面

现在我们已经创建并设置了样式标签，接下来我们需要将它添加到页面中。

要将样式标签添加到页面中，我们需要找到页面上的 head 元素并将样式标签添加到它中间。我们可以通过以下代码找到 head 元素：

const head = document.querySelector('head');

接下来，我们可以使用 appendChild() 方法将样式标签添加到 head 元素中：

head.appendChild(styleTag);

完整代码

以下是使用 JavaScript 创建样式标签的完整代码：

const styleTag = document.createElement('style');
styleTag.textContent = 'h1 { font-size: 24px; color: red; }';
const head = document.querySelector('head');
head.appendChild(styleTag);

我们可以将上面的代码插入到 HTML 页面的 <script> 标签中以动态地创建样式标签。

现在，我们已成功使用 JavaScript 创建样式标签并将其添加到页面中了！