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

Question

基本上，我需要为两个不同的物体随机生成相同的颜色。有没有什么建议可以将这两个对象链接起来，以便具有相同的随机颜色？每当发生某种条件时，颜色应该刷新，并且两个物体都应该具有特定的颜色。 谢谢！ //顺便说一句，任何编程语言都有用

- Jason Nieman

---

你是如何称呼在中国和荷兰的两个不同实体的？https://stackoverflow.com/help/how-to-ask - Mister Jojo

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
}

- cam

Answer 2

我建议使用自定义属性（也称为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() 函数：

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

然后，您可以在if语句中使用style.setProperty覆盖该属性：

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

在这篇文章中了解更多关于动态设置自定义属性的相关信息。

- Rúnar Berg