Appended to html page script and CSS don't work
Question
I am trying to append some CSS and JS to my static HTML file. CSS and JS files are stored in the same folder. It sounds stupid, but I need to do that. So, CSS and JS have been appended but they are not applying to a HTML file because background should be red. The path that I created is correct because if I do inspect element on Chrome Devtools and click to appended link it opens what I need. So, there are no errors, scrip appends what I need, but I see no result.
My HTML file
<!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>
My CSS file:
body {
background-color: red;
}
1 answers
solution1
2 ACCPTED 2017-11-18 10:10:52
You need to fix the following line
link.rel='rel';
to
link.rel='stylesheet';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.