Javascript：如何获得图像的随机宽度和高度 [英] Javascript: how to get random width and height for image
本文介绍了Javascript：如何获得图像的随机宽度和高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我身体里有10张图片，还有Randomize按钮。当我点击Randomize按钮时，我需要获得所有图像的随机高度和宽度。我怎么能这样做？
我的尝试：
我试过这样的事情。
I have 10 images in the body, and Randomize button. When i click on Randomize button, i need to get random height and width for that all images. How can i do that?
What I have tried:
I have tried like this`
<style>
.d1{
float: left;
margin: 1px;
width: 130px;
height: 130px;
background-size: cover;
}
#btn3{
width: 100px;
height: 30px;
}
</style>
<div class="d1" style="background-image: url(Images/1.jpg)"></div>
<div class="d1" style="background-image: url(Images/2.jpg)"></div>
<div class="d1" style="background-image: url(Images/3.jpg)"></div>
<div class="d1" style="background-image: url(Images/4.jpg)"></div>
<div class="d1" style="background-image: url(Images/5.jpg)"></div>
<div class="d1" style="background-image: url(Images/6.jpg)"></div>
<div class="d1" style="background-image: url(Images/7.jpg)"></div>
<div class="d1" style="background-image: url(Images/8.jpg)"></div>
<div class="d1" style="background-image: url(Images/9.jpg)"></div>
<div class="d1" style="background-image: url(Images/10.jpg)"></div>
<button onclick="randomize()" id="btn3">Randomize</button>
function randomize(){
var arr = document.querySelectorAll(".d1")
var height = parseInt(Math.random()*1000);
var width = parseInt(Math.random()*1000);
for(var i = 0; i < arr.length; i++){
arr[i].style.height = height;
arr[i].style.width = width;
}
}
推荐答案
你的问题很模糊。每个图像都有固定的高度和宽度，因为它们不是矢量图像。您无法获得随机高度和宽度，但如果您查找随机数，那么这是一个不同的主题。看看这个 JavaScript random（）方法 [ ^ ]
你用图像作为背景每个DIV。如果是这样，则无法为任何图像设置高度或宽度。您将设置div的高度和宽度。但是，如果您想根据图像的高度和宽度设置div的高度和宽度，那么您将寻找不同的方法。以下代码可能会有所帮助
Your question is vague. each image has fixed height and width, since they are not vector image. You can't get random height and width, but if you look for random number then it's a different topic. Take a look at this JavaScript random() Method[^]
And you have used image as background of each DIV. If so, you cannot set height or width to any of the image. You are going to set height and width for div. But, if you want to set your div height and width according to your images height and width, it would be different method that you are seeking for. The following code might help
<html>
<script>
function process(di) {
var imgurl = di.style.backgroundImage.replace(/^url\(\"|\"\)
/ g， ）;
var img = new Image（）;
img.onload = function（）{
di.style.height = this.height;
di.style.width = this.width;
}
img.src = imgurl;
}
window.onload = function（）{
var x = document.querySelectorAll（ .nonsense ）
for（var i = 0; i< x.length; i ++）{
process（x [i]）;
}
};
< / script>
< body>
< div class =废话 style = background-image ：url（orange.png） > ORANGE COLOR< / div>
< div class =废话 style = background-image ：url（red.png） > red COLOR< / div>
< / body>
< / html>
/g, ""); var img = new Image(); img.onload=function () { di.style.height=this.height; di.style.width=this.width; } img.src = imgurl; } window.onload = function () { var x=document.querySelectorAll(".nonsense") for(var i=0;i<x.length; i++) { process(x[i]); } }; </script> <body> <div class="nonsense" style="background-image:url(orange.png)" >ORANGE COLOR</div> <div class="nonsense" style="background-image:url(red.png)" >red COLOR</div> </body> </html>
这篇关于Javascript：如何获得图像的随机宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
