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";
}

Answer 2

为您的div（NameDiv）提供ID并编辑您的功能：

document.getElementById("NameDiv").style.left = "300px";

Answer 3

document.getElementsByClassName（'sleepImage'）将返回一个包含类名为sleepImage的所有元素的数组。你想要第一个元素，所以最后添加一个索引。如下所示

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

Answer 4

好吧，如果你观察，你写的代码是：

document.getElementsByClassName("sleepImage").style.left = "300px";

您是否观察到 getElementsByClassName 。顾名思义，它返回元素而不是元素。这些元素作为集合返回（类似于arrays）。因此，您需要遍历集合以获取您正在寻找的元素。

以下代码是您需要使用的代码：

document.getElementsByClassName("sleepImage")[0].style.left = "300px";

请参阅下面的演示：

＆＃13;

document.getElementById("myBtn").addEventListener("click", function () {
    document.getElementsByClassName("sleepImage")[0].style.left = "300px";
});

＆＃13;

.sleepImage {
     position: absolute;
 }

＆＃13;

<table>
   <tbody>
      <tr>
      <td><img onclick="sleepFunction()" src="01.jpg" height="180" width="120" alt="selectorImage"/></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>
       </table>
<input type="button" value="Move Image" id="myBtn"/>
       <div class = "sleepImage">
<img src = "sleeping.jpg" width= "490" alt="sleepImage"/>
   </div>

＆＃13;

希望这有帮助!!!

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

4 个答案: