gpt4 book ai didi

javascript - 使用 JavaScript 在 HTML 中一次放置多个图像

转载 作者:搜寻专家 更新时间:2023-10-31 08:34:43 25 4
gpt4 key购买 nike

编辑:这是另一个问题:我无法用 for 循环定义每张图片的 Z-index

function placeImage(x) {
var div = document.getElementById("div_picture_right");

div.innerHTML = ""; // clear images

for (counter = 1; counter <= x; counter++ ) {
var image = document.createElement("img");
image.src = "borboleta/Borboleta" + counter + ".png";
image.width = "195";
image.height = "390";
image.alt = "borboleta" + counter;
image.id = "imagem" + counter;
image.position = "relative";
image.style.zIndex = counter;
div.appendChild(image);
}
};

window.onload = function () {
placeImage(20);
};

<body>
<div id="div_wrapper">
<div id="div_header">
<h1>First Project</h1>
</div>
<div id="div_picture">
<div id="div_picture_left"></div>
<div id="div_picture_right"></div>
</div>
</div>
</body>

检查 FireBug 时,我得到这个:

Error: image corrupt or truncated

最佳答案

看起来您的代码是在 div 出现在页面上之前执行的。在完全加载之前,您不应该尝试获取 DOM 中元素的句柄。您可以在 window.onload 之外定义您的函数,但将您的调用保持在 window.onload 内,例如:

function placeImage(x)
{
var div = document.getElementById("div_picture_right");

div.innerHTML = ""; // clear images

for (counter=1;counter<=x;counter++) {
var imagem=document.createElement("img");
imagem.src="borboleta/Borboleta"+counter+".png";
div.appendChild(imagem);
}
}

window.onload = function() {
placeImage(48);
};

我还添加了一个小改进,即获取 div 的句柄并存储在变量中一次,而不是每次迭代都获取一个新句柄。

关于javascript - 使用 JavaScript 在 HTML 中一次放置多个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14726529/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com