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の初期化が実行されていることを確認する必要があります。したがって、1つの解決策は次のようになります。

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

もう1つの解決策は、その変数の代わりに関数を作成し、必要なときにいつでも使用することです。

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