JavaScript 如何创建一个样式标签

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

JavaScript最强大的功能之一是操纵DOM的能力，DOM是一个网页的结构。操作DOM的一个方法是使用JavaScript创建和修改样式标签。在这篇博文中，我们将介绍使用JavaScript创建样式标签的不同方法，以及如何使用它来改变网页的外观。

创建一个样式标签

在JavaScript中构建一个样式标签最流行的方法是使用 document.createElement() 方法，尽管还有其他的选择，以及 createElement() 方法。我们想要创建的元素的标签名称是这个函数接受的唯一参数。这种情况下的参数应该是 “style”，因为我们要添加一个样式标签。

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

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

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

另外，我们也可以创建一个样式标签，使用innerHTML属性在一行代码中把它添加到文档的头部。

// create and add a new style tag to the head of the document
document.head.innerHTML += "<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 = "";

例子

假设我们想在一个按钮被点击时改变网页的背景颜色。我们可以创建一个样式标签并添加一个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>