有问题[暂停]有问题-Java 学习之路

-2

我正在进行180天的网站挑战，但遇到了一些麻烦 . 非常熟悉HTML和CSS，并试图在我的html文档中添加一些JavaScript在Brackets中 .

我试图让我的对象的眼睛跟随鼠标 . 通过在线观看教程，我按照步骤进行操作，这一行：

var balls = document.getElementByClassName("ball");

不工作，我不知道为什么！这是我的完整HTML / JS代码：

<!DOCTYPE html>
   <html>
   <head>


    <meta charset="utf-8">
    <title>Animation Text</title>
    <link href="taniaWebsite.css" type="text/css" rel="Stylesheet" />
    </head>

   <body> 


   <div class="eyes">
   <div class="eye">
   <div class="ball"></div> 
    </div>

      <div class="eye">
   <div class="ball"></div> 
    </div>
  </div>




    <script>

    var balls = document.getElementByClassName("ball");
    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;
    }      
}       
</script>



   </body>
    </html>

这是链接的CSS：

body{
margin:0;
padding:0;
background-color:rosybrown;
}


.eyes{
position: absolute;
top: 50%;
transform: translate(-50);
width: 100%;
text-align: center;
}

.eye{
width:240px; 
height: 120px; 
background: #fff;
display: inline-block;
margin: 40px; 
border-radius: 50%;
position: relative; 
overflow:hidden;  
}

.ball{
width: 40px;
height: 40px;
background: #000;
position: absolute; 
top: 50%;
left: 50%; 
transform: translate(-50%, -50%);
border-radius: 50%; 
border:15px solid #333;

}

有人可以帮帮我吗？？？

1 回答

2
问题是你正在使用 getElementByClassName . 这不存在 - 它需要 Element s ：
```
var balls = document.getElementsByClassName("ball");
```
如果你只想在做另一件事时获得该类的第一个元素，你可以像这样使用 querySelector ：
```
var firstBall = document.querySelector(".ball");
```
回复于 2024-05-09T08:35:43+08:00

有问题[暂停]有问题

1 回答

相关问题