“无法读取未定义的属性'样式'” onmousemove答案

【问题标题】："Cannot read property 'style' of undefined" onmousemove“无法读取未定义的属性'样式'” onmousemove
【发布时间】：2021-08-04 12:47:34
【问题描述】：

所以在我的网站上，我想要一些文字跟随我的光标。我使用以下JS：

var balls = document.getElementsByClassName("text1");
  document.onmousemove = function(){
    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";

    for(var i=0;i<2;i++){
      balls[i].style.left = x;
      balls[i].style.top = y;
      balls[i].style.transform = "translate(-"+x+",-"+y+")";
    }
  };

但在 chrome 中我收到以下错误消息：

未捕获的类型错误：无法读取未定义的属性“样式” 在 HTMLDocument.document.onmousemove (script.js:7) document.onmousemove @ script.js:7

谁能帮帮我？

【问题讨论】：

好吧，显然balls[0]（或balls[1]）是未定义的。我没有上下文可以看到 document.getElementsByClassName("text1"); 是什么，但它没有像您预期的那样返回数组。

标签： javascript html cursor undefined onmousemove

【解决方案1】：

您的代码中的问题是您一直循环到“i==2”，但您可能只将“text1”类附加到 1 个元素，这就是为什么当循环到达 balls[1] 时它会抛出错误“无法读取未定义的属性 'style'”。

因此要么减少循环最大值，要么将“text1”类附加到更多元素。

这是工作示例。

<!DOCTYPE html>
<html>
<script>
  var balls = document.getElementsByClassName("text1");
  document.onmousemove = function() {
    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";
    for (var i = 0; i < 2; i++) {
      balls[i].style.left = x;
      balls[i].style.top = y;
      balls[i].style.transform = "translate(-" + x + ",-" + y + ")";
    }
  };
</script>

<body>
  <p class="text1">Hello</p>
  <p class="text1">World</p>
</body>

</html>

【讨论】：

好答案！能否添加运行 sn-p 的选项？