javascript - 如何使图像显示在容器 Div 内?
问题描述
简单地说,我有一个 javascript 代码,当用户单击按钮时会生成一个随机图像。这是一个带有一个按钮和一个容器 div 的空白页面。问题是图像出现在容器之外,它直接出现在 . 我需要控制它会出现在哪里。我想把它放在容器里。我不是 javascript 专家,我只是在长时间搜索后才找到代码。我需要帮助,谢谢:)
代码在这里: https ://codepen.io/Haitham1000/pen/aXjYzz
function display_random_image()
{
var theImages = [{
src: "http://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg",
width: "240",
height: "160"
}, {
src: "http://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg",
width: "320",
height: "195"
}, {
src: "http://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg",
width: "500",
height: "343"
}];
var preBuffer = [];
for (var i = 0, j = theImages.length; i < j; i++) {
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i].src;
preBuffer[i].width = theImages[i].width;
preBuffer[i].height = theImages[i].height;
}
// create random image number
function getRandomInt(min,max)
{
// return Math.floor(Math.random() * (max - min + 1)) + min;
imn = Math.floor(Math.random() * (max - min + 1)) + min;
return preBuffer[imn];
}
// 0 is first image, preBuffer.length - 1) is last image
var newImage = getRandomInt(0, preBuffer.length - 1);
// remove the previous images
var images = document.getElementsByTagName('img');
var l = images.length;
for (var p = 0; p < l; p++) {
images[0].parentNode.removeChild(images[0]);
}
// display the image
var targetContainer = document.getElementsByClassName("container");
targetContainer[0].appendChild(newImage);
}
解决方案
您将图像附加到正文而不是 div。获取 div
var targetContainer = document.getElementsByClassName("container");
然后追加它
targetContainer[0].appendChild(newImage);
function display_random_image()
{
var theImages = [{
src: "http://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg",
width: "240",
height: "160"
}, {
src: "http://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg",
width: "320",
height: "195"
}, {
src: "http://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg",
width: "500",
height: "343"
}];
var preBuffer = [];
for (var i = 0, j = theImages.length; i < j; i++) {
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i].src;
preBuffer[i].width = theImages[i].width;
preBuffer[i].height = theImages[i].height;
}
// create random image number
function getRandomInt(min,max)
{
// return Math.floor(Math.random() * (max - min + 1)) + min;
imn = Math.floor(Math.random() * (max - min + 1)) + min;
return preBuffer[imn];
}
// 0 is first image, preBuffer.length - 1) is last image
var newImage = getRandomInt(0, preBuffer.length - 1);
// remove the previous images
var images = document.getElementsByTagName('img');
var l = images.length;
for (var p = 0; p < l; p++) {
images[0].parentNode.removeChild(images[0]);
}
// display the image
var targetContainer = document.getElementsByClassName("container");
targetContainer[0].appendChild(newImage);
}
body {margin-top: 30px;}
<div class="container">
<button id="jsstyle"
onclick="display_random_image();">Show Image</button>
</div> <!-- Container -->
推荐阅读
- javascript - 为什么 x 输出 onclick 等于被点击的列表索引?
- html - 将不同大小的图标相互对齐(字体真棒)
- python - 测试。检查脚本的每个部分(如果是块代码)的正确性
- datetime - 在颤动中将字符串转换为日期时间
- c# - Newtonsoft.Json CreateObjectUsingCreatorWithParameters 中的 ArgumentNullException
- zurb-foundation - 如何从scss构建基础
- r - 如何在R中的for循环中的每一轮中获得结果
- android - 依赖关系有什么问题?我正在使用 androidX
- php - 如何插入两个表;一个将插入 1 行,另一个将插入多行,两个表的一列具有相同的值
- javascript - JQuery & PHP - 如何在表单中保存重新排序的 div 组?