Question

我有一个动态定位背景图片的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

我很神秘。为什么第一个功能起作用而不是第二个？

Answer 1

如果未定义bw [0]，则表示document.getElementsByClassName（“BottomWrapper2”）返回undefined，这很可能意味着在运行脚本时div不在页面上。如果您在代码后加载代码，则不应发生这种情况。

第一个工作原因是因为它正在等待onload事件触发。

Answer 2

如果您使用这样的功能，它将起作用

<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>

之前的那些会导致错误，因为在加载正文之前调用该函数

只有“onload”形式的JavaScript函数有效吗？

2 个答案: