用Javascript随机设置图像的宽和高
用Javascript随机设置图像的宽和高
提问于 2020-06-18 15:02:32
对我来说很难理解的是，当随机图像显示时，我如何设置它们的宽度和高度。有人能帮帮我吗？
这是我的代码
function randomImage(){
var imagesArray = ['images/person1.jpg', 'images/person2.jpg', 'images/person3.jpg'];
var num = Math.floor(Math.random() * 3);
document.canvas.src = imagesArray[num];
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display random image</title>
</head>
<body>
<input type="button" id="randomImage" onclick="randomImage()" value="Random">
<img src="" name="canvas" />
</body>
</html>
我不知道如何设置宽度和高度，所以我还没有写代码，这段代码只是在我单击按钮时随机显示图像
你的帮助是我的荣幸
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-06-18 15:12:07
要通过名称属性标识图像，请使用getElementsByName或较新的样式，而要设置宽度和高度，可以使用querySelector属性：
document.getElementsByName("canvas")[0].src = imagesArray[num];或
document.querySelector("img[name=canvas]").src = imagesArray[num];宽度和高度(您也可以在这里使用querySelector )：
document.getElementsByName("canvas")[0].style.width = "100px";
document.getElementsByName("canvas")[0].style.height= "100px";
function randomImage(){
let imagesArray = ['images/person1.jpg', 'images/person2.jpg', 'images/person3.jpg'];
let num = Math.floor(Math.random() * 3);
let image = document.getElementsByName("canvas")[0];
image.src = imagesArray[num];
image.style.width = "100px";
image.style.height = "100px";
}<input type="button" id="randomImage" onclick="randomImage()" value="Random">
<img src="" name="canvas" />
如果您想要一个随机值作为宽度和高度，请使用它而不是我的示例中的100
Stack Overflow用户
发布于 2020-06-18 15:11:01
你应该创建一个类："image“
在CSS中，你应该添加：.image{ width: 220px；//你在这里输入你的值height: auto；//以考虑图像的比例}
我不确定这是否回答了您的问题，但您也可以选择其他方法，您可以执行以下操作：
<div class="wrapper">
<img>
</div>其中.wrapper已将overflow设置为隐藏，并且img具有100%的宽度和高度自动，
Stack Overflow用户
发布于 2020-06-18 15:28:11
你可以在这里使用window.canvas，但那是not advisable。为了检索一个元素，document.querySelector是您的朋友。
randomImage();
document.addEventListener("click", evt => {
if (evt.target.nodeName === "BUTTON") {
randomImage();
}
});
function randomImage() {
const imagesArray = [
'https://picsum.photos/200/300',
'https://picsum.photos/300/400',
'https://picsum.photos/100/100'
];
const randomNumber = Math.floor(Math.random() * 3);
document.querySelector("img[name='canvas']").src = imagesArray[randomNumber];
}button {
float: right;
position: fixed;
right: 30vw;
top: 1rem;
}<img name="canvas" src="" />
<br><button>Another picture</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62444192
复制相关文章
相似问题
腾讯云开发者
