JavaScript添加CSS样式头文件：有时在客户端页面需要动态修改页面内容呈现，不直接调用或定义CSS样式，此时可以通过Javascript定义CSS样式，然后通过“document.head.appendChild”添加样式，这里我们提供了两种方法：

document.createElement("style")：通过创建“style”标签，在“textContent”中写入样式定义， style.textContent = "p { color:red}"，用document.head.appendChild添加标签进来。

document.createElement("link")：创建“link”标签，在“.href”属性中写入CSS样式文件，cssLink.href = "StyleSheet.css"; 在“.rel”属性中写入“stylesheet”，在“.type ”属性中写入“text/css”，同样通过 document.head.appendChild将标签添加进来。如下代码：

HTML 代码  复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        const style = document.createElement("style")
        style.textContent = "p { color:red}"
        document.head.appendChild(style)


        const cssLink = document.createElement("link");
        cssLink.href = "StyleSheet.css";
        cssLink.rel = "stylesheet";
        cssLink.type = "text/css";
        document.head.appendChild(cssLink);
    </script>
</head>
<body>
    <p>P 标签样式</p>
</body>
</html>

下面是浏览器预览效果，可以看到，在Head标签中已经创建了两个资源，一个是style标签，一个link标签引入了“StyleSheet.css”样式文件，此文件中定义了“body”背景颜色属性“ background-color:antiquewhite”，效果如下：