javascript - 使用 JavaScript 以便在单击图像时更改另一个元素的位置

Question

我是 JavaScript 的新手，我正在尝试创建一个事件，当单击图像时，另一个图像的位置会发生变化。我在屏幕左侧隐藏了一张图片，页面中央有一张图片表。我试图做到这一点，以便在单击表格中的图像时隐藏的图像从左侧滑出。我正在尝试学习 JavaScript，但还不想使用 JQuery。提前感谢您的帮助。

下面是 HTML、CSS 和 JavaScript:

表格的 HTML:

  <table>
   <tbody>
      <tr>
      <td><img onclick="sleepFunction()" src="01.jpg" height="180" width="120"></td>
      <td><img src="02.jpg" height="180" width="120"/></td>
      <td><img src="03.jpg" height="180" width="290"/></td>
      </tr>
      <tr>
      <td><img src="04.jpg" height="180" width="120"/></td>
      <td><img src="05.jpg" height="180" width="120"/></td>
      <td><img src="06.jpg" height="180" width="290"/></td>
      </tr>
      <tr>
      <td><img src="07.jpg" height="180" width="120"/></td>
      <td><img src="08.jpg" height="180" width="120"/></td>
      <td><img src="09.jpg" height="180" width="290"/></td>
      </tr>
   </tbody>

图像的 HTML:

<div class = "sleepImage">
<img src = "sleeping.jpg" width= "490"/>
   </div>

这是 CSS:

 .sleepImage {
float: right;
position: absolute;
top: 108px;
left: -600px;
}

这是 JavaScript 代码:

function sleepFunction() {
document.getElementsByClassName("sleepImage").style.left = "300px";
}

Answer 1

将 sleepImage 从类更改为 id，这样您的代码应该是

html

<div id = "sleepImage">
<img src = "sleeping.jpg" width= "490"/>
</div>

CSS

#sleepImage {
   /* your styles here */
}

js

function sleepFunction() { 
   document.getElementById("sleepImage").style.left = "300px";
}