用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>
我不知道如何设置宽度和高度，所以我还没有写代码，这段代码只是在我单击按钮时随机显示图像
你的帮助是我的荣幸
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62444192
复制相关文章
相似问题
腾讯云开发者
