Javascript 随机CSS值

我有这个页面，我有3个完全由CSS组成的三角形。 每次有人加载页面时，我都希望三角形有不同的大小

下面是在JSFIDLE中演示的内容：

我想做的是在页面加载时随机设置每个三角形的

边框宽度

的值

我想用JavaScript做一个

Math.random

之类的东西，但我没有做到，也没有在互联网上找到一些帮助（我不知道如何用JavaScript编写）

[编辑]我忘了说我想添加

min

和

max

值

---

我希望能得到一些帮助或指导。非常感谢

您可以尝试使用

LESS

声明一个变量

@var:Math.random（）边框宽度中：@var
这里是jsfiddle的用法

我所做的是：


随机值介于0和1之间，并将其乘以100（您将获得介于0和100px之间的px边框宽度）
设置为站点上每个“div”的css属性
示例代码：

var triangle = document.querySelector("div");
for (var i = 0; i < triangles.length; ++i)
{
    triangle[i].style.borderWidth = Math.round(Math.random()*200) + "px";
}

[0]
是节点列表的第一个元素。因为它只包含一个元素，所以我们可以使用这条捷径。
如果您使用
ids
而不是
classes
，那么这个问题将更容易解决，因此您可以使用
document.getElementById
。我建议您将
类
替换为
id
。


第1部分：获取随机的
边框宽度



要做到这一点，请按照问题中的建议使用
Math.random
。请注意，使用
Math.random
返回0到1之间的值。由你决定你想要的边界范围。对于我的回答，我将只使用
5像素的范围
，但如果需要，您可以更改该值。因此，要获得范围最大为5的值，需要将
Math.random（）
乘以5。不过要小心！您需要将其转换为字符串以更改CSS

var randomWidth = Math.random()*5;
var width = randomWidth.toString();


第2部分：设置三角形的
边框宽度。
要更改
边框宽度
，请对3个
ID执行此操作：

document.getElementById("red").style.borderWidth = width + "px";

要通过CSS选择器获取对元素的引用，请使用
document.querySelector
。要更改元素的样式，请更新其
style
属性的相应大小写属性，例如
element.style.borderRightWidth=“5px”。您确实可以使用
Math.random
生成随机数。有了这些成分，你应该有望走上正轨；谢谢。我可以问你我是否可以将
min
max
值添加到
border width
值中吗？试着想想这个：）这是一个快速的解决方案，因为我很忙，但应该有效：）好运气汉克斯，我知道这一定是基本的JavaScript，但你太棒了！结果是：如果你喜欢，告诉我你的想法。
document.getElementById("red").style.borderWidth = width + "px";