如何使用 JavaScript 创建样式标签

作者

使用 JavaScript 创建样式标签

How to create a style tag using JavaScript

要创建样式标签：

  1. 使用document.createElement()方法创建style标签。
  2. 使用该textContent属性将样式分配给标签。
  3. 使用该方法将style标签添加到。headappendChild()

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Apple, Pear, Banana</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const style = document.createElement('style');

style.textContent = `
  #box {
    width: 100px;
    height: 100px;
    background-color: salmon;
    color: white;
  }

  body {
    background-color: lightgrey;
  }
`;

document.head.appendChild(style);

我们使用
document.createElement
来创建一个style元素。

我们传递给该方法的唯一参数是一个字符串，它指定要创建的元素的类型。

该createElement方法返回新创建的元素。

我们使用
textContent
属性为元素分配一些样式。

请注意，我们使用反引号 “（不是单引号）以便在设置元素的文本内容时能够使用多行字符串。

该textContent属性表示元素及其后代的文本内容。这正是我们向style标签添加样式时所需要的。

document.head
属性返回当前文档的元素
head。

我们调用了
appendChild
方法将style标签附加到head页面上的元素。

如果我打开示例中的页面，我可以看到style标签已成功创建。

创建样式标签

–

发表评论