Random CSS value

Random CSS value

本文关键字：value CSS Random      更新时间：2023-09-26

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

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

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

我正在考虑用带有Math.random或其他东西的JavaScript来做到这一点，但我没有设法做到这一点，也没有在互联网上找到一些帮助（我不知道如何用Javascript编写）。

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

我将不胜感激对此的一点帮助或指导。多谢

这是 jsfiddle http://jsfiddle.net/qaF24/5/，只需Math.random()用

法

我所做的是：

  • 介于 0 和 1 之间的随机值并将其乘以 100（您将获得 0 到 100px 之间的边框宽度（以 px 为单位）
  • set 是作为站点上每个"div"的 CSS 属性
您可以

尝试在声明变量@var: Math.random(); LESS然后在border-width : @var;

中使用

示例代码：

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。它包含使用 document.querySelector 选择的所有div节点。
  2. 对于LUS迭代每个div。
  3. div index的三角形[i]被打开并访问样式属性。
  4. 在 0 和 200 之间生成随机值，并向上或向下舍入为整数。

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

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

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

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

如果您使用

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";
相关文章：