如果var raster = document.querySelector ("canvas")在 HTML 文件中，定义并声明了栅格。但是，我希望将所有内容都放在 js 文件中，只将函数调用放在 HTML 中。当我尝试输入var raster...时在 .js 文件中，它不断出现 null .
有什么办法可以拥有document.querySelector指向关联的 HTML 文件？
// this doesn't work
//var raster = document.querySelector ("canvas").getContext ("2d");
function drawSquare (w,h) {
raster.fillStyle = "blue";
raster.fillRect (0,0,w,h);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFS</title>
<script src="IFS.js"></script>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script>var raster = document.querySelector ("canvas").getContext ("2d");
drawSquare (500,500);</script>
</body>
</html>
最佳答案
尝试移动<script src="IFS.js"></script>到 HTML 代码的末尾，在结束 <body> 之前标签，而不是将其放在 <head> 处.
导致该问题的原因是脚本在<canvas>之前加载。被渲染，所以 document.querySelector ("canvas")返回null .
关于javascript - document.querySelector 在 .js 文件中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43147320/