0

我们在主体中设置的主 div 上有一个 gmap，如下所示。然后在 javascript 中，我们添加了一个新的 div，如下所示。问题是带有表格的 div 一直出现在页面的左上角并且永远不会去任何其他位置，即使我如何尝试更改document.getElementById("auto").style.top="35px";和 document.getElementById("auto").style.left="35px";

var contents = document.createElement("div");
contents.style.width="300px";
contents.style.height="100px";

var htmlString = '<table style="background-color: #ffffff;">\r\n';
htmlString += '<tr><td>Name</td><td valign="top"><input id="nm" type="text" style="width:100%" value=""></td></tr>\r\n';
htmlString += '<tr><td>Description</td><td valign="top"><input id="desc" type="text" style="width:100%" value=""></td></tr>\r\n';
htmlString += '<tr><td>Client</td><td valign="top">'+clientList+'</td></tr>\r\n';                          
htmlString += '<tr>\r\n';
htmlString += '<td>&#160;</td><td><input type="button" value="Save" onclick="editFeature(\'Point\')"> <input type="button" value="Cancel" onclick="saveFeatureCancel()"></td>\r\n';
htmlString += '</tr>\r\n';
htmlString += '</table>\r\n';               

contents.innerHTML="<form name='form2' id='form2' onsubmit='javascript:codeAddress();return false;'><div id='auto' style='z-index:5; position:relative'>"+htmlString+"</div></form>";
document.getElementById('map').appendChild(contents);
document.getElementById("contents").style.position="relative";
document.getElementById("auto").style.top="35px";
document.getElementById("auto").style.left="35px";

身体的主要代码

<body>
  <div id="map">
  </div>
</body>
4

3 回答 3

2

您永远不会将“contents”DOM 元素的 id 设置为“contents”。 只需添加此（最后）行的简单修复。

var contents = document.createElement("div");
contents.style.width="300px";
contents.style.height="100px";
contents.id = 'contents';

这是我的 jsFiddle。

于 2013-03-06T16:16:52.647 回答
1

您正在为具有 id 的元素设置top' leftauto' 而不是 'map'

所以你可能不得不使用，

document.getElementById("map").style.position="absolute";或者document.getElementById("map").style.position="fixed";

和

document.getElementById("map").style.top="35px";
document.getElementById("map").style.left="35px";
于 2013-03-06T16:14:49.890 回答
1

这里有几个问题。请参阅工作 jsFiddle 以供参考：http: //jsfiddle.net/7hzct/1/

首先，您应该（从您的评论中可以看出）将位置设置为absolute，而不是relative。

接下来，您将添加div#contents到div#map. 从您的评论看来，您想将其添加到正文中（在 旁边#map）：

document.body.appendChild(contents);

此外，您正在为 设置top和left坐标#auto，您想使用bottom和right并为 设置它们#contents：

document.getElementById("contents").style.position="absolute";
document.getElementById("contents").style.bottom="35px";
document.getElementById("contents").style.right="35px";

我没有碰过你的 html 字符串，但读起来很可怕——不要这么多使用内联 CSS！. 此外，valign自 HTML 4.01 以来已被弃用。

于 2013-03-06T17:00:50.527 回答