为什么'；我的javascript动态图像放置工作方式和我的硬编码版本不一样吗？
我已经成功创建了一个html/javascript文档，它使用硬编码“为什么'；我的javascript动态图像放置工作方式和我的硬编码版本不一样吗？,javascript,html,Javascript,Html,我已经成功创建了一个html/javascript文档，它使用硬编码“”和“ 动态放置版本 <html> <head> <script LANGUAGE="JavaScript" type="text/javascript"> var iImage = 0; var imageFiles = ["./map.png","./t01.png"] var numImages = 2; function imageLoad() { for(iImage =
<html>
<head>
<script LANGUAGE="JavaScript" type="text/javascript">
var iImage = 0;
var imageFiles = ["./map.png","./t01.png"]
var numImages = 2;
function imageLoad() {
for(iImage = 0; iImage < numImages; iImage++) {
document.images[iImage].src = imageFiles[iImage];
}
}
</script>
</head>
<body onLoad="imageLoad();">
<div id="imageBox" STYLE="position: absolute; top:0px; height: 1px;">
<div ID="frame0" STYLE="position: absolute; top: 0em; left: 0em;">
<img src="./map.png" border="1">
</div>
<div ID="frame1" STYLE="position: absolute;top: 0em; left: 0em;">
<img src="./t01.png" border="1">
</div>
</div>
</body>
</html>
变量iImage=0；
var imageFiles=[”/map.png“，”/t01.png“]
var numImages=2；
函数imageLoad（）{
placeImage（）；
对于（iImage=0；iImage您没有为动态放置版本中的元素提供任何样式，这就是此处的问题所在 在你的代码中试试这个
<html>
<head>
<script LANGUAGE="JavaScript" type="text/javascript">
var iImage = 0;
var imageFiles = ["./map.png","./t01.png"]
var numImages = 2;
function imageLoad() {
placeImage();
for(iImage = 0; iImage < numImages; iImage++) {
document.images[iImage].src = imageFiles[iImage];
}
}
function placeImage()
{
for(iImage = 0; iImage < numImages; iImage++) {
// Create div for this image.
var thisDiv = document.createElement("div");
var thisDivID = "frame" + iImage;
thisDiv.id = thisDivID;
thisDiv.position = "absolute";
// Create image.
var thisImage = document.createElement("img");
thisImage.src=imageFiles[iImage];
// Add this image to this div.
thisDiv.appendChild(thisImage);
// Add this div to the imageBox div.
document.getElementById("imageBox").appendChild(thisDiv);
}
}
</script>
</head>
<body onLoad="imageLoad();">
<div id="imageBox" STYLE="position: absolute; top:0px; height: 1px;"></div>
</body>
</html>
并将这样的样式指定给其他需要的元素，您在静态硬编码版本中也为这些元素指定了样式。硬编码版本似乎将“frame0”和“frame1”的“top”和“left”设置为“0em”。在动态版本中，我看不到“thisDiv”会发生这种情况。这是一个很好的捕获，但将这些属性添加到动态版本中确实如此没什么区别。你使用了“thisDiv.style.[position/top/left]”吗？我想对提供的答案进行评论，你已经内联了imageBox，但是如果你想用代码来做，只需要做一次。是的，我使用了
thisDiv.style.top=“0em”thisDiv.style.left=“0em”";我通常将内联样式定义移动到样式部分中的类定义，然后将新创建项的类设置为该类。我对el.setAttribute（）功能比较熟悉，所以在特定样式元素的语法错误的情况下，我没有立即回答。我想接近你实施的战略。很高兴Nikunj的回答成功了。这就解决了问题，尽管您建议的六行中唯一需要更改的是thisDiv.style.position=“absolute”我在做“thisDiv.position=“absolute”，我以为是一样的。（imageBox样式设置在主体html中处理）。谢谢@凯文：好的，很高兴这对你有帮助。
thisDiv.style.position="absolute";
thisDiv.style.top="0em";
thisDiv.style.left="0em";
document.getElementById("imageBox").style.top="0px";
document.getElementById("imageBox").style.height="1px";
document.getElementById("imageBox").style.position="absolute";