附加到html页面脚本和CSS无效

Question

我试图将一些CSS和JS附加到我的静态HTML文件中。 CSS和JS文件存储在同一文件夹中。 这听起来很愚蠢，但我需要这样做。 因此，已添加CSS和JS，但由于背景应为红色，因此它们不适用于HTML文件。 我创建的路径是正确的，因为如果我inspect element了Chrome Devtools上的inspect element并单击了附加链接，它将打开我需要的内容。 因此，没有错误，脚本会附加我需要的内容，但是我看不到任何结果。

我的HTML档案

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Home</title>
</head>
<body>

hello world

<script>
  const href = window.location.pathname;
  const chunkIndex = href.lastIndexOf('/');
  const path = href.slice(0, chunkIndex + 1);

  function appendScripts() {
    const script = document.createElement("script");
    script.src = path + "scripts.js";    // use this for linked script
    document.body.appendChild(script);
  }

  function appendCSS() {
    link=document.createElement('link');
    link.href= path + 'styles.css';
    link.rel='rel';
    document.getElementsByTagName('head')[0].appendChild(link);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    appendCSS();
    appendScripts();
  });
</script>

</body>
</html>

我的CSS文件：

body {
  background-color: red;
}

Answer 1

您需要修复以下行

link.rel='rel';

至

link.rel='stylesheet';

附加到html页面脚本和CSS无效

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-11-18 10:10:52

附加到html页面脚本和CSS无效

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-11-18 10:10:52

解决方案1
2 已采纳 2017-11-18 10:10:52