如何解决Bingo卡片选中格子时尺寸变化问题，仅实现背景色变更

问题 #

开发Bingo卡片时，选择颜色并点击标记格子后，格子尺寸变化导致布局错位，需要实现仅变更选中格子背景色、不改变尺寸的效果。

原因及解决方案 #

格子尺寸变化的核心原因是颜色类可能额外添加了边框、内边距等盒模型属性，或者单元格本身没有固定尺寸/盒模型设置不当。以下是具体解决步骤：

• 统一单元格盒模型：给所有Bingo单元格设置box-sizing: border-box，确保边框、内边距不会撑开元素尺寸；同时设置固定宽高或用网格布局均分空间。
• 限制颜色类样式：颜色类仅定义background-color，不要添加任何影响尺寸的属性（如padding、border、margin）。
• 优化JS逻辑：切换颜色时自动更新所有已标记单元格的颜色，避免状态不一致。

具体代码修改 #

1. 添加必要的CSS样式

#bingoCard {
  border-collapse: collapse; /* 合并表格边框，避免间隙 */
  width: 100%;
  max-width: 500px; /* 限制卡片最大宽度 */
  margin: 0 auto;
}

#bingoCard td {
  border: 2px solid #333;
  padding: 1rem;
  text-align: center;
  width: 20%; /* 5列均分宽度 */
  height: 80px; /* 固定单元格高度 */
  box-sizing: border-box; /* 关键：内边距和边框计入总尺寸 */
  cursor: pointer;
}

/* 颜色类仅定义背景色 */
.color-red {
  background-color: #ff4444;
}
.color-blue {
  background-color: #33b5e5;
}
.color-yellow {
  background-color: #ffbb33;
}

/* 标记状态可复用基础样式 */
.marked {
  color: #fff; /* 可选：标记后文字变白色，增强可读性 */
}

2. 优化JavaScript代码

var selectedColor = "";
// 示例词汇数组，可替换为自定义内容
var words = ["示例1", "示例2", "示例3", "示例4", "示例5", 
             "示例6", "示例7", "示例8", "示例9", "示例10",
             "示例11", "示例12", "示例13", "示例14", "示例15",
             "示例16", "示例17", "示例18", "示例19", "示例20",
             "示例21", "示例22", "示例23", "示例24", "示例25"];

function generateCard() {
  var card = document.getElementById("bingoCard");
  card.innerHTML = "";
  shuffleArray(words);
  var index = 0;
  for (var i = 0; i < 5; i++) {
    var row = card.insertRow();
    for (var j = 0; j < 5; j++) {
      var cell = row.insertCell();
      cell.textContent = words[index++];
      cell.onclick = markNumber;
    }
  }
}

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

function markNumber() {
  this.classList.toggle("marked");
  // 移除所有旧颜色类
  this.classList.remove("color-red", "color-blue", "color-yellow");
  // 若选中颜色且单元格已标记，添加对应颜色类
  if (selectedColor && this.classList.contains("marked")) {
    this.classList.add(selectedColor);
  }
}

function changeColor(color) {
  selectedColor = color;
  // 切换颜色时，统一更新所有已标记单元格的颜色
  var markedCells = document.querySelectorAll("#bingoCard .marked");
  markedCells.forEach(cell => {
    cell.classList.remove("color-red", "color-blue", "color-yellow");
    cell.classList.add(selectedColor);
  });
}

关键说明 #

• box-sizing: border-box是核心，确保单元格的内边距和边框不会改变其设定的宽高。
• 颜色类仅保留background-color，彻底避免尺寸变化。
• 切换颜色时遍历已标记单元格，统一更新颜色，保证状态同步。

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