在前端开发中，样式是网页设计的关键之一。而在 HTML 中，我们可以使用 <style> 标记来定义样式。通常情况下，我们会在 HTML 文件中嵌入 CSS 代码。但是，在某些情况下，我们可能需要使用 JavaScript 动态地创建和插入 <style> 标记。
创建 <style> 标记的方法</h2>
<p>以下是使用 JavaScript 创建 <code><style></code> 标记的步骤：</p>
<ol>
<li>首先，我们需要创建一个 <code><style></code> 元素。可以使用 <code>document.createElement()</code> 方法创建元素并指定标记名称。</li>
</ol>
<pre class="prettyprint login javascript">const styleTag = document.createElement('style');</pre><ol start="2">
<li>然后，我们需要向 <code><style></code> 元素添加样式。可以使用 <code>textContent</code> 属性设置元素的文本内容，并在其中编写 CSS 代码。</li>
</ol>
<pre class="prettyprint login javascript">styleTag.textContent = `
body {
background-color: #f2f2f2;
}
`;</pre><ol start="3">
<li>最后，我们需要将 <code><style></code> 元素插入到文档中。可以使用 <code>appendChild()</code> 方法将元素添加到文档的 <code><head></code> 或 <code><body></code> 中。</li>
</ol>
<pre class="prettyprint login javascript">document.head.appendChild(styleTag);</pre><p>现在，我们已经成功地使用 JavaScript 创建并插入了 <code><style></code> 标记。</p>
<h2>示例代码</h2>
<p>以下是一个简单的示例，演示如何使用 JavaScript 创建并插入 <code><style></code> 标记：</p>
<pre class="prettyprint html">-- -------------------- ---- -------
--------- -----
------
------
----------------- ------ ----- -----------
-------
------
--------- -----------
--------
-- -- ------- --
----- -------- - --------------------------------
-- ----- ------- --
-------------------- - -
---- -
----------------- --------
-
-- -
------ ----
-
--
-- -- ------- --
------------------------------------
---------
-------
-------</pre><p>在上面的代码中，我们首先创建了一个 <code><style></code> 元素，然后向其中添加了两条 CSS 规则。其中，第一条规则设置了页面的背景颜色为灰色；第二条规则设置了标题文本的颜色为红色。最后，我们将 <code><style></code> 元素插入到文档的头部。</p>
<h2>指导意义</h2>
<p>使用 JavaScript 动态地创建 <code><style></code> 标记可以帮助我们更加灵活地控制网页的样式。例如，在处理动态数据并需要根据数据状态改变样式时，使用 JavaScript 创建和修改样式标记是非常方便的。</p>
<p>但是，过度使用 JavaScript 来控制样式可能会导致网页性能降低，并且在维护样式时会更加困难。因此，在实际开发中，应该根据具体场景来选择是否使用 JavaScript 动态地创建样式标记。</p>
<blockquote>
<p>来源：<a href="https://www.javascriptcn.com/post/8771">JavaScript中文网</a> ，转载请注明来源
<a href="https://www.javascriptcn.com/post/8771">https://www.javascriptcn.com/post/8771</a></p>
</blockquote>