如何使用 JavaScript 创建 style 标签？

JavaScript 允许开发者创建和操作 style 标签，以改变网页的外观。通过使用document.createElement() 方法、.sheet 属性以及.insertRule() 和.deleteRule() 方法，我们可以向样式表中添加、修改和删除 CSS 规则。通过将这些技术与事件监听器结合使用，我们可以创建动态和交互式的网页，这些网页可以根据用户交互改变其外观。

JavaScript 最强大的功能之一是能够操作 DOM（文档对象模型），也就是网页的结构。操作 DOM 的一种方法是使用 JavaScript 创建和修改 style 标签。在这篇博文中，我们将介绍使用 JavaScript 创建 style 标签的不同方法，以及如何使用它来更改网页的外观。

创建 Style 标签

在 JavaScript 中构造 style 标签最常用的方法是使用document.createElement() 方法，当然还有其他方法，例如createElement() 方法。此函数只接受一个参数：我们要创建的元素的标签名称。在这种情况下，因为我们要添加一个 style 标签，所以参数应该是“style”。

// create a new style tag
var style = document.createElement("style");

创建 style 标签后，我们可以使用document.head.appendChild() 方法将其添加到文档的头部。

// add the style tag to the head of the document
document.head.appendChild(style);

或者，我们也可以使用 innerHTML 属性在一行代码中创建 style 标签并将其添加到文档的头部。

// create and add a new style tag to the head of the document
document.head.innerHTML += "<style></style>";

更新样式

创建 style 标签后，我们可以使用.sheet 属性访问样式表对象，并使用.insertRule() 方法向其中添加新的 CSS 规则。.insertRule() 方法接受两个参数：第一个是要添加的 CSS 规则，第二个是要插入规则的索引。如果不指定索引，则规则将添加到样式表的末尾。

// add a new CSS rule to the stylesheet
style.sheet.insertRule("body { background-color: red; }", 0);

您也可以使用.append() 方法一次添加多个 CSS 规则。

// add multiple CSS rules to the stylesheet
style.sheet.append("body { background-color: red; }");
style.sheet.append("h1 { color: white; }");

更改现有样式

我们可以使用 styleSheet 对象的.cssText 属性更改现有样式。

// change the existing styles
style.sheet.cssText = "body { background-color: blue; }";

移除样式

要移除特定的 CSS 规则，我们可以使用.deleteRule() 方法。此方法接受一个参数，即要移除的规则的索引。

style.sheet.deleteRule(0);

要移除所有 CSS 规则，我们可以使用 .cssText 属性。

// remove all the CSS rules
style.sheet.cssText = "";

示例

假设我们希望在单击按钮时更改网页的背景颜色。我们可以创建一个 style 标签，并添加一个 CSS 规则来使用以下代码更改背景颜色：

<html>
<head>
   <script>      
      // get the button element when the DOM is loaded
      var style = document.createElement("style");
      document.head.appendChild(style);
      style.sheet.insertRule("body { background-color: red; }", 0);
      document.addEventListener("DOMContentLoaded", function() {
         var button = document.getElementById("changeColor");
         
         // add an event listener to the button
         button.addEventListener("click", function() {
            
            // change the background color of the body
            document.body.style.backgroundColor = "blue";
         });
      });
   </script>
</head>
<body>
   <button id="changeColor">Change Color</button>
</body>
</html>

在这个例子中，我们首先创建一个新的 style 标签并将其添加到文档的头部。然后，我们添加一个 CSS 规则，将正文的背景颜色更改为红色。单击按钮时，我们将使用 .cssText 属性将正文的背景颜色更改为蓝色。

更新于：2023年3月2日

7000+ 次浏览

启动您的职业生涯

完成课程后获得认证

开始学习
广告