动态链接css

Question

我的文件夹结构如下所示：

|--js
  |-- main.js
|--css
  |--main.css
|--Folder1
  |-- c.html
|--Folder2
  |-- d.html
|--a.html
|--b.html

所有html文件都将链接到main.js，我在js中有如下所示的东西来动态链接main.css，但这只适用于html a和b。对于html c和d，它希望css文件夹位于同一个文件夹中。

var theorigin = window.location.origin;
var thefile = window.location.pathname.split("/").pop();
var folder = window.location.pathname.replace(thefile, "");
var newdest = theorigin + folder;

var link = document.createElement("link");
link.href = newdest + "../css/main.css";
link.type = "text/css";
link.rel = "stylesheet";
document.head.appendChild(link);

有人知道如何做到这一点吗？将css动态链接到html，而不管文件夹如何？

注意:我知道我可以通过执行这个<link href="../css/main.css" rel="stylesheet" />来链接放在文件夹中的html中的css，但出于某些原因，我不想这样做。

Answer 1

只需使用下面的代码。它直接指向根(/)。

link.href = "/css/main.css";

Answer 2

我觉得你把代码弄得太复杂了。为什么不只是：

var link = document.createElement("link");
link.href = "/css/main.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);