我想使用Javascript操作CSS
在下面的CSS代码中,我想使用Javascript的Math.random()属性设置square random的大小,但我不知道如何使用它在CSS中指定大小我想使用Javascript操作CSS,javascript,css,Javascript,Css,在下面的CSS代码中,我想使用Javascript的Math.random()属性设置square random的大小,但我不知道如何使用它在CSS中指定大小 #square { width: 100px; height: 100px; background: red; } 在这里,在指定的宽度和高度的地方,我希望它是随机的。 我还希望正方形的坐标/方向是随机的。 它不同于生成随机数。生成随机数是解决这个问题的一部分,但不是完整的解决方案。给你。工
#square {
width: 100px;
height: 100px;
background: red;
}
在这里,在指定的宽度和高度的地方,我希望它是随机的。
我还希望正方形的坐标/方向是随机的。
它不同于生成随机数。生成随机数是解决这个问题的一部分,但不是完整的解决方案。给你。工作代码
var randomWidth=Math.random()*500;
var width=randomWidth.toString();
document.getElementById(“square”).style.width=width+“px”;
document.getElementById(“square”).style.height=width+px代码>
#正方形{
背景:红色;
}
您可以这样做,这将随机设置高度和宽度,如果您想设置相同的高度和宽度,则只能使用相同的随机数:
reset();
函数重置(){
重置_平方();
重置_位置();
}
函数重置_square(){
document.getElementById(“square”).style.width=Math.floor(Math.random()*100)+1+“px”;
//返回1到100之间的随机整数
document.getElementById(“square”).style.height=Math.floor(Math.random()*100)+1+“px”;
//返回1到100之间的随机整数
}
功能复位_位置(){
document.getElementById(“square”).style.top=Math.floor(Math.random()*100)+1+“px”;
//返回1到100之间的随机整数
document.getElementById(“square”).style.left=Math.floor(Math.random()*100)+1+“px”;
//返回1到100之间的随机整数
}
#正方形{
背景色:红色;
颜色:白色;
位置:绝对位置;
}
这是定制尺寸
重置
函数randSize(){
返回Math.random()*100+10+“px”;
}
for(document.getElementsByClassName(“兰德”)的变量e){
e、 style.width=randSize();
e、 style.height=randSize();
}
#elem1{
背景颜色:蓝色;
}
#elem2{
背景色:红色;
}
#elem3{
背景颜色:绿色;
}
reset();
函数重置(){
重置_平方();
重置_位置();
}
函数重置_square(){
document.getElementById(“square”).style.width=Math.floor(Math.random()*100)+1+“px”;
//返回1到100之间的随机整数
document.getElementById(“square”).style.height=Math.floor(Math.random()*100)+1+“px”;
//返回1到100之间的随机整数
}
功能复位_位置(){
document.getElementById(“square”).style.top=Math.floor(Math.random()*100)+1+“px”;
//返回1到100之间的随机整数
document.getElementById(“square”).style.left=Math.floor(Math.random()*100)+1+“px”;
//返回1到100之间的随机整数
}
#正方形{
背景色:红色;
颜色:白色;
位置:绝对位置;
}
这是定制尺寸
重置
这是否回答了您的问题?不可能完全通过CSS来完成。但是你可以使用一些预处理器,我想OP已经是关于Math.Random
和通过JavaScript来做的了。@ABGR还建议他不知道如何使用它。toString()
不是needed@JulienMaret以防万一。把它放进去没有害处。我知道,如果没有这一点,它也会起作用。无论如何谢谢:)实际上我也希望这个职位是随机的。i、 e.坐标/方向是随机的,你能提出一些建议吗?实际上我也希望位置是随机的。i、 e.坐标/方位是随机的,你能提出一些建议吗?根据你的信息更新答案。事实上,我也希望这个位置是随机的。i、 e.坐标/方向是随机的,你能提出一些建议吗?