javascript - 在全局范围内声明图像变量不会被分配，但在函数内部会被分配

Question

我正在尝试用普通的 JavaScript 创建一个功能，以便使某些图像在特定条件下出现和消失。因此，将其 id 分配给图像并创建了此函数:(删除了整体功能只是为了使事情变得更简单，因为它们与当前问题没有任何冲突) 当我调用该函数时，图像按预期成功从屏幕上消失。

function imageOff()
{
var img = document.getElementById("theimage");
img.style.opacity = "0";
}

但是，如果我在该函数之外将其声明为全局图像，则图像不会消失，并且当我尝试 console.log(img) 时，我还会发现该变量未定义:

var img = document.getElementById("theimage");
img.style.opacity = "0";

我需要这个的原因是，一旦用户访问网站一次，就分配该图像的不透明度值，而不是每次调用该函数时都执行该值!

Answer 1

问题是，您甚至在加载 DOM 之前就分配了变量 img。

var img = document.getElementById("theimage");

如果您使用窗口的 onload 函数放置/包装所有代码，问题应该会解决，因为 onload 确保 DOM 加载。

window.onload = function(){

 var img = document.getElementById("theimage");

  ... your functions ()..

}

当您放入函数中时它会起作用，因为当您执行该函数时，DOM 已加载。