javascript - 访问函数内的 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%';
}

有任何想法吗？

score 1 · Accepted Answer

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

var box1;

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

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

score 0 · Accepted Answer

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

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

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

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

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

$("#box1")

score 0 · Accepted Answer

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

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

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

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

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

3 回答 3