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

Question

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

Answer 1

简单的解决方案是生成一次随机颜色，然后将两个主体的颜色设置为该颜色。将其放入 refreshColors 函数中，并在满足您的条件时调用该函数。

if (condition) {
  refreshColors()
}

function refreshColors () {
  // generate color
  let color = generateRandomColor()

  // set Body A color
  body_a.style.color = color

  // set Body B color
  body_b.style.color = color
}

Answer 2

我建议使用custom property（也称为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;
}

并确保您的元素使用此属性，使用CSS var() function：

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

然后你用style.setProperty覆盖你的if语句中的那个属性：

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

详细了解动态设置自定义属性in this article。