如何用JavaScript修改数组元素颜色？实现扑克牌红桃方块红色显示

针对你提供的代码，我们可以在生成花色后判断类型，给对应的DOM元素设置红色样式，同时修正原代码中的一处错误（Math.random()不需要传参数）：

修改后的完整代码：

window.onload = function() {
  let generateRandomNumber = () => {
    let numbers = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
    let indexNumber = Math.floor(Math.random() * numbers.length);
    return numbers[indexNumber];
  };
  let generateRandomSuit = () => {
    let suits = ["♦", "♥", "♠", "♣"];
    // 修正：Math.random()不需要传参数，原代码的Math.random(suits)是错误的
    let indexSuit = Math.floor(Math.random() * suits.length);
    return suits[indexSuit];
  };
  document.querySelector("#number").innerHTML = generateRandomNumber();

  var allSuits = generateRandomSuit();
  const suitElements = [document.querySelector("#top"), document.querySelector("#bottom")];
  
  suitElements.forEach(el => {
    el.textContent = allSuits;
    // 判断是否为红桃或方块，设置红色
    if (allSuits === "♥" || allSuits === "♦") {
      el.style.color = "red";
    } else {
      el.style.color = "black";
    }
  });
};

如果更倾向于样式与逻辑分离，也可以用CSS类实现：

1. 先定义CSS类：

.red-suit {
  color: red;
}
.black-suit {
  color: black;
}

2. 修改JavaScript中的样式设置部分：

suitElements.forEach(el => {
  el.textContent = allSuits;
  el.className = allSuits === "♥" || allSuits === "♦" ? "red-suit" : "black-suit";
});

内容的提问来源于stack exchange，提问作者Mw7