Question

   <html>
   <head>
   <script type="text/javascript">
   function changepic()
   {
   document.getElementById("demo").style.top=2000;  
   }
   </script>
    </head>
   <body>

 <h1>My First Web Page</h1>
  <div id="demo">
  <img src="./omna.jpg"  style="position:absolute; left: 400; top: 100; width: 200;      height: 200;"/>
  </div>
  <button type="button" onclick="changepic()">change pic</button>
  </body>
  </html>

为什么我无法改变图片的位置出错？

<img id="demo"> ' google says it works

我不知道，但上面的html页面无法正常工作我想在点击按钮时更改图像的位置，请帮我解决这些问题。我使用谷歌浏览器

<img onclick="somefunc()"> can I set function onclick to image also? right?

但它不起作用请帮助我使用HTML代码！

Answer 1

您正在尝试设置标识为top的元素的demo，即<div>。我假设div没有设置position:absolute因此不会移动到任何地方，我想你希望<img>移动而不是移动<div>。如果您从<div>中删除了ID并将其添加到<img>（就像上面的第二段代码中那样），那么您应该没有任何问题。这段代码应该有效：

<html>
<head>
<script type="text/javascript">
function changepic()
{
 document.getElementById("demo").style.top=2000 + "px";  
}
</script>
</head>
<body>

<h1>My First Web Page</h1>
<div>
<img id="demp" src="./omna.jpg"  style="position:absolute; left: 400; top: 100; width: 200;      height: 200;"/>
</div>
<button type="button" onclick="changepic()">change pic</button>
</body>
</html>

Answer 2

您设置图像的内嵌样式，然后设置div的top。要么做其中一个。或者更好的是，只需删除div，为您添加id并设置它的样式。

<img id="image" src="./omna.jpg"  style="position:absolute; left: 400; top: 100; width: 200; height: 200;" />

document.getElementById("image").style.top=2000;

单击时更改图像的位置

2 个答案: