如何将我的本地 css 文件包含到我的 js 文件中？ [复制]答案

【问题标题】：How can I include my local css file to my js file? [duplicate]如何将我的本地 css 文件包含到我的 js 文件中？ [复制]
【发布时间】：2021-02-24 11:13:15
【问题描述】：

当我只为我的网站使用 HTML 和 CSS 文件时，CSS 效果可以正常应用。但是当我尝试使用 node.js 运行我的网站时，所有的 CSS 效果都被删除了。如何将我的 CSS 文件合并到我的 app.js 文件中？

【问题讨论】：

您应该先尝试在 Google 上搜索您的问题，然后再在 SO 上提问，看看是否有任何适合您的方法。此外，如果没有任何效果，我们需要看看您尝试了什么。如有必要，您的代码以及说明。
您能否澄清这是关于客户端或服务器端 JavaScript 的？你在使用 Express 之类的框架吗？
@Rounin
哈！谢谢@网友。我的手指在打字，但我的大脑被关闭了。 :-)
是的 @Rounin 你的解决方案也可以，但我需要一个更通用的解决方案。谢谢。

标签： javascript html css node.js

【解决方案1】：

如果您使用车把，请将您的 CSS 文件放在 public 文件夹下。

如果您不依赖任何把手，请单独保存文件，然后使用<link> 标签调用它。

<link rel="stylesheet" href="styles.css"></link>

【讨论】：

【解决方案2】：

。使用 document.getElementsByTagName() 方法获取 HTML 头部元素。

。使用 createElement('link') 方法创建新的链接元素。

。初始化链接元素的属性。

。将链接元素附加到头部。

例子：

使用名称 style.css 创建 CSS 文件：

.Setcolor { 
    
  color:blue; 

}

使用 JavaScript 添加 CSS 文件：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Load CSS file using JavaScript 
    </title> 
  
    <script> 
          
        // Get HTML head element 
        var head = document.getElementsByTagName('HEAD')[0];  
  
        // Create new link Element 
        var link = document.createElement('link'); 
  
        // set the attributes for link element  
        link.rel = 'stylesheet';  
      
        link.type = 'text/css'; 
      
        link.href = 'style.css';  
  
        // Append link element to HTML head 
        head.appendChild(link);  
    </script>  
</head> 
  
<body> 
    <h2 class="Setcolor">TheColoris</h2> 
</body> 
  
</html>

【讨论】：

不用构造一个数组来使用 getElementsByTagName 获取第一个元素，只需将第一个作为标准文档属性直接访问：document.head