时间戳

首页 > 解决方案 > 为 2 个不同的对象生成相同的 2 种随机颜色

html - 为 2 个不同的对象生成相同的 2 种随机颜色

问题描述

基本上，我必须为 2 个不同的身体随机选择相同的颜色。有没有人对我如何将两个对象链接为具有相同的随机颜色有任何提示？每当发生某种情况时，颜色应该会刷新，并且两个身体都应该具有特定的颜色。多谢！//顺便说一句，任何代码语言都是有用的

标签： htmlcssrandomcolorsp5.js

解决方案

我建议使用自定义属性（也称为CSS 变量）：

function randomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  
  return `rgb(${r},${g},${b})`;
}

const root = document.documentElement;

root.style.setProperty("--random-color", randomColor());
.element-1,
.element-2 {
  background-color: var(--random-color);
}
<p class="element-1">Element 1</p>
<hr />
<p class="element-2">Element 2</p>

如果您愿意，可以将自定义属性设置为 CSS 文件中的某个默认值：

:root {
  --random-color: rebeccapurple;
}

并确保你的元素使用这个属性，使用CSSvar()函数：

.element-1,
.element-2 {
  background-color: var(--random-color);
}

然后，您使用以下方法覆盖您的 if 语句中的该属性style.setProperty：

if (condition) {
  const root = document.documentElement;
  root.style.setProperty("--random-color", randomColor());
}

在本文中阅读有关动态设置自定义属性的更多信息。

推荐阅读