访问函数内部的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);