访问函数内的JavaScript变量

我试图使用一个变量来保存一个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%';
}

---

有什么想法吗？

我想您可以在加载DOM之前访问它。请尝试以下方法：

var box1;

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

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

---

您应该确保在加载页面后运行框1初始化。 因此，一个解决方案是：

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

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

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

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

$("#box1")

---

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

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

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

您还可以定义不带

var

的变量，该变量将使其成为

窗口

对象的属性

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

---

你说你不能让它工作。当你尝试它时会发生什么？一定是范围问题。尝试在不使用var关键字的情况下声明变量，看看它是否有效。是否可以发布所有代码？