随机CSS值

Question

我有这个页面，我有3个纯三角形的三角形。 每当有人加载页面时，我希望三角形具有不同的大小。

以下是JSFiddle中说明的内容：http://jsfiddle.net/qaF24/4/

我想要做的是在页面加载时随机设置每个三角形的border-width值。

我在考虑用Math.random或者其他东西来做这件事，但我没有设法做到这一点，也没有在互联网上找到一些帮助（我不知道怎么写的Javascript）。

[编辑]我忘了说我想添加min和max值。

我很感激为此提供一些帮助或指导。非常感谢

Answer 1

以下是jsfiddle http://jsfiddle.net/qaF24/5/，其中只有Math.random()用法

我所做的是：

• 0到1之间的随机值并将其乘以100（您将在0和100px之间获得px的边框宽度）
• set是每个`div＆＃39;的css属性。现场

Answer 2

您可以尝试使用LESS声明变量@var: Math.random();，然后使用border-width : @var;

Answer 3

示例代码：

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

分解

1. 三角形是node list。它包含使用div选择的所有document.querySelector个节点。
2. for lus遍历每个div。
3. 三角形[i]，其中index为div，并且访问了样式属性。
4. 在0和200之间生成随机值，并向上或向下舍入为整数。

当然，您的代码使用不同的边框宽度，但这应该可以帮助您入门。

奖励：您可以使用它来选择各个div：

document.querySelector("div[class='color']")[0]; //replace color with the colour class names you use.

[0]是节点列表的第一个元素。由于它只包含一个元素，我们可以使用这个捷径。

Answer 4

如果您使用ids代替classes，则可以更轻松地解决此问题，以便您可以使用document.getElementById。我建议您将classes替换为ids
第1部分：随机border-width
要完成此操作，请使用您在问题中建议的Math.random。请注意，使用Math.random会返回0到1之间的值。您可以自行决定边框的范围。对于我的回复，我只会使用一系列5 pixels但您可以根据需要更改该值。因此，要获得范围最大为5的值，您需要将Math.random()乘以5.但要小心！您需要将其转换为字符串才能更改 CSS 。

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

第2部分：设置三角形的border-width。 要更改border-width，请为3 ids执行此操作：

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