Question

当我执行style.top语句时，图像不想从顶部更改600像素。

＆＃13;

document.getElementById("testing").onclick = function(event){
    document.getElementById("image").width=400;
    document.getElementById("image").style.top = "600px";
}

＆＃13;

#testing{
    color:blue;
}

＆＃13;

<p id="testing">
    
aewrfafffffffffffffffacvfav
</p>
    
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>

＆＃13;

从我的理解，这应该工作。我不知道发生了什么。简而言之，如何使用JavaScript更改图像的位置？这是绝对的位置，但不确定。

Answer 1

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> .bar{ margin-left: 150px; margin-top: -95px; } .abc { width:600px; height:120px; background-color:yellow; position:absolute; display:inline-block; } ul{ position:relative; display:inline-block; } ul li { display:inline; font-size:24px; } </style> </head> <body> <div class="abc"> <div class="Image"><img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" /></div> <div class="bar"> <ul > <li><a href="www.quora.com">Home</a></li> <li><a href="www.quora.com">gallery</a></li> <li><a href="www.quora.com">about us</a></li> <li><a href="www.quora.com">contact</a></li> </ul> </div> </div> </body> </html>属性本身绝对没有。元素也需要定位。例如，top或position: relative。

top，right，bottom和left属性指定定位元素的位置。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/position

图像相对于容器定位并且单击段落后position: absolute属性发生更改的示例：

top

document.getElementById("testing").onclick = function(event) {
  document.getElementById("image").style.top = "100px";
}

.container {
  position: relative;
}
img {
  position: absolute;
  width: 400px;
}

Answer 2

top，right，bottom和left属性指定定位元素的位置。 - position^MDN

您的图片元素未定位，因此使用top，right，bottom或left将无效。为了在不改变文档流程的情况下定位元素（使用固定或绝对会做），您可以使用position: relative;，它将保留在文档流程中，而现在正在考虑＆＃34;定位＆＃34;

＆＃13;

document.getElementById("testing").onclick = function(event){
    document.getElementById("image").width=400;
    document.getElementById("image").style.top = "600px";
}

＆＃13;

#testing{
    color:blue;
}
#image{
    position: relative; /* <- positioning */
}

＆＃13;

<p id="testing">
    
aewrfafffffffffffffffacvfav
</p>
    
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>

＆＃13;

什么是定位？
默认情况下，元素以与HTML源中出现的顺序相同的顺序依次流动，每个元素的大小和位置取决于元素的类型，元素的内容以及元素的显示上下文。它将在页面上呈现。 HTML布局的默认流模型不允许对页面上元素的放置进行高级控制。通过将一小组CSS属性应用于为页面定义的元素，CSS可以通过提供精确坐标来控制元素的精确位置。 - About Element Positioning^MSDN

更改style.top时图像不移动

2 个答案: