0

背景画像を動的に配置する JavaScript 関数があります。

  window.onload = function() {
    bw = document.getElementsByClassName("BottomWrapper");
    if (bw.length===0){
      bw = document.getElementsByClassName("BottomWrapper2");
    }
    pos = window.innerWidth/2 - 490.5;
    bw=Array.prototype.slice.call(bw);
    bw[0].style.backgroundPosition="center 0px, " + pos + "px 0px";
  };

そしてそれは動作します。しかし、まったく同じ関数に名前を付けて実行すると、次のようになります。

function position() {
  bw = document.getElementsByClassName("BottomWrapper");
  if (bw.length===0){
    bw = document.getElementsByClassName("BottomWrapper2");
  }
  pos = window.innerWidth/2 - 490.5;
  bw=Array.prototype.slice.call(bw);
  bw[0].style.backgroundPosition="center 0px, " + pos + "px 0px";
};
position();

エラーが発生します：

TypeError: Cannot read property 'style' of undefined

私は当惑しています。最初の機能が機能し、2 番目の機能が機能しないのはなぜですか?

4

2 に答える 2

3

bw[0] が未定義の場合、それは document.getElementsByClassName("BottomWrapper2") が未定義を返したことを意味します。これは、スクリプトが実行されたときに div がページになかった可能性が高いことを意味します。タグの後にコードをロードする場合、これは発生しません。

最初の方法が機能する理由は、onload イベントが発生するのを待っているためです。

于 2012-12-10T00:42:49.117 に答える
0

このような関数を使用すると、機能します

<html><head>
<script>

function position() {
  bw = document.getElementsByClassName("BottomWrapper");
  console.log(bw);
  if (bw.length===0){
    bw = document.getElementsByClassName("BottomWrapper2");
  }
  pos = window.innerWidth/2 - 490.5;
  bw=Array.prototype.slice.call(bw);
  bw[0].style.backgroundPosition="center 0px, " + pos + "px 0px";
  console.log(bw[0]);
};
   </script>
<body onload="position()">
<div class="BottomWrapper2"></div>
</body></head></html>

ボディがロードされる前に関数が呼び出されるため、前のものはエラーを引き起こします

于 2012-12-10T00:52:00.300 に答える