访问函数内的JavaScript变量

Question

我正在尝试使用变量来保存HTML ID，因此我不必一遍又一遍地写getElementById。但我不能让这个工作。这是我的代码：

var box1 = document.getElementById('box1');

function slide4(){
    box1.style.width='10%';
}

如果我把变量放在函数中，它就可以工作，但这似乎是不好的做法，因为我想在其他函数中访问该变量，并且不想一遍又一遍地声明变量。

function slide4(){
    var box1 = document.getElementById('box1');
    box1.style.width='10%';
}

有什么想法吗？

Answer 1

我认为你在加载DOM之前就访问了它。试试这个：

var box1;

window.onload = function() {
    box1 = document.getElementById('box1');
}

function slide4() {
    box1.style.width = '10%';
}

Answer 2

您应确保在加载页面后运行 box1 初始化。 所以一个解决方案就是：

var box1 = null;
window.onload = function(){
    box1 = document.getElementById('box1');
}

另一个解决方案是创建一个函数，而不是该变量，并在需要时使用它：

function BoxID(){
    return document.getElementById('box1');
}

当然，如果你使用jquery库，你可以随时使用：

$("#box1")

Answer 3

我建议你将变量作为参数传递：

var box1 = document.getElementById('box1');

function slide4(box){
    box.style.width='10%';
}

您也可以定义不带var的变量，使其成为window对象的属性

box1 = document.getElementById('box1');
alert(window.box1);