外部 javascript 文件在 HTML 文件中不起作用
[英]External javascript file not working in HTML file
問題描述
我正在嘗試從 javascript 文件更改 div 的屬性，但它不起作用，如果我將它放在正文中，它就可以工作，但我想從外部 js 文件中為某些項目工作。
HTML 文件
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Calendar</title>
<link rel="stylesheet" href="css/styles.css">
<script src="javascript/cal.js"></script>
</head>
<body>
<div id="container">
<div id="calendar-view">
</div>
<div id="events-view">
</div>
</div>
</body>
</html>
CSS 文件
*{
box-sizing: border-box;
}
#calendar-view{
float: left;
width: 70%;
background-color: blue;
height: 200px;
}
#events-view{
float: left;
width: 30%;
height: 200px;
background-color: red;
}
#container::after{
content: "";
clear: both;
display: table;
}
Javascript 文件
function startUp(){
document.getElementById("calendar-view").style.display = "none";
}
startUp();
我正在嘗試從 javascript 文件更改 div 的屬性，但它不起作用，如果我將它放在正文中，它就可以工作，但我想從外部 js 文件中為某些項目工作。
2 個解決方案
解決方案1
1 已采納 2021-04-11 22:49:22
當您在<header>處導入 JS 文件時，您的 JS 會加載，然后是您的正文。
當你在<body>之后導入你的 JS 文件時，你的 body 會加載，然后是你的 JS。
第一個解決方案是把你的JS文件放在第二個是把function調用放在window onload事件監聽器之后
解決方案2
0 2021-04-11 23:04:32
您必須將<script src="javascript/cal.js"></script>放在</body>標記的末尾。
在瀏覽器通過 HTML 獲取元素之前，您無法從 DOM 獲取元素。
html 中的外部 javascript 文件不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.