使用JavaScript，这样当点击图像时，另一个元素's的位置发生了变化

Using JavaScript so that when an image is clicked another element's position is changed

本文关键字：位置 变化 发生了 元素 JavaScript 使用 图像 另一个      更新时间：2023-09-26

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

将sleepImage从class更改为and 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";
}

给你的div（NameDiv）一个Id并编辑你的函数：

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

document.getElementsByClassName（'sleepImage'）将返回类名为sleepImage的所有元素的数组。你想要第一个元素，所以在末尾添加一个索引

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

如果您观察到，您编写的代码是：

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

您是否观察到getElementsByClassName。顾名思义，它返回元素，而不是元素。这些元素作为集合返回（类似于arrays）。因此，您需要对集合进行迭代，以获得您要查找的元素。

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

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

请参阅下面的演示：

document.getElementById("myBtn").addEventListener("click", function () {
    document.getElementsByClassName("sleepImage")[0].style.left = "300px";
});
.sleepImage {
     position: absolute;
 }
<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>

希望这能有所帮助！！！

相关文章：