随机CSS值

我有这个页面，我有3个纯粹由CSS制成的三角形。每次有人加载页面时，我都希望三角形具有不同的大小。随机CSS值

这里有一个的jsfiddle所示的东西：http://jsfiddle.net/qaF24/4/

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

我在想用JavaScript做一个Math.random什么的，但是我没有设法做到这一点，也没有在互联网上找到一些帮助（我不知道如何用Javascript编写）。

[编辑]我忘了说我想增加一个min和max的值。

我希望对此有所帮助或指导。非常感谢

2014-12-24 Davcoccio

要获得通过CSS选择器的元素的引用，使用'document.querySelector'。要更改元素的样式，请更新其'style'属性的适合驼峰的属性，例如'element.style.borderRightWidth =“5px”;'。你确实可以使用'Math.random'来产生随机数。有了这些成分，你应该有希望能够走上正轨。 – icktoofay

你试过了什么？ –

我会生成CSS，然后设置elmStyle.innerHTML = strGeneratedCSS; – dandavis

这里的jsfiddle http://jsfiddle.net/qaF24/5/与单纯Math.random()使用

我所做的是：

0到1之间的随机值并将其乘以100（您将得到0到100像素之间的px的边框宽度）
组是如在现场每个`的div”的CSS属性

来源

2014-12-24 22:19:13

非常感谢。我是否也可以问你是否可以在'border-width'值中加'min'' max'值？ – Davcoccio

试着想想这个http://jsfiddle.net/qaF24/16/ :)这是快速的解决方案，因为我很着急，但应该工作:)祝你好运 –

谢谢你，我知道这必须是基本的JavaScript，但是你摇滚！这里的结果是：http://jsfiddle.net/qaF24/18/如果你觉得它告诉我你的想法。 – Davcoccio

，你可以尝试使用LESS声明变量@var: Math.random();，然后在

来源

2014-12-24 22:18:32

示例代码：

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

击穿

三角形是node list。它包含用document.querySelector选择的所有div节点。
for lus迭代每div。
triangle [i]其中index是div被打开并且style属性被访问。
在0和200之间生成一个随机值，向上或向下取整为整数。

当然，你的代码使用不同的边框宽度，但这应该让你开始。

奖励：你可以用它来选择单个的div：

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

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

来源

2014-12-24 22:22:27 Mouser

如果您使用ids而不是classes，则此问题将更容易解决，因此您可以使用document.getElementById。我建议你用ids代替你的classes。

第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";

来源

2014-12-24 22:38:29

回答

相关问题