Javascript CSS背景和重叠边框

我有以下代码： HTML:

JavaScript:

const cells = document.querySelectorAll('.cell');
console.log(cells.length, 'cell length')
const rowLength = document.querySelectorAll('.row').length;
const rowObj = document.querySelector('.row');
const allRowObjs = document.querySelectorAll('.row');
// need to revisit this
const oneColLength = allRowObjs[0].children.length; 
const oneRowLength = allRowObjs[0].children.length; //4
let currIndex = 0;
const matrix = new Array(allRowObjs.length);
let currX = 0;
let currY = 0;
let counter = 0;
const buttons = document.querySelectorAll('button');

for(let i = 0; i<=rowLength-1; i++) {
    matrix[i] = new Array(oneColLength);
}

// copy cells to matrix
for(let i = 0; i<=rowLength-1; i++) {
  for(let j = 0; j<=oneColLength-1; j++) {
    matrix[i][j] = cells[counter];
    counter++;
  }
}

console.log(matrix.length, 'matrix length');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    removeHighlight();
    moveAndCheckBound(this);
  })
})

cells.forEach(cell => {
  cell.addEventListener('click', function() {
      removeHighlight();
      cell.style.backgroundColor = 'green';
      getCurrentPos(this);
  })
})

function removeHighlight() {
  cells.forEach(cell => {
    cell.style.backgroundColor = 'white';
  })
}

function getCurrentPos(ele) {
    for(let i = 0; i<=matrix.length-1; i++) {
      for(let j = 0; j<=oneColLength-1;j++) {
        if(ele === matrix[i][j]) {
          currX = i;
          currY = j;
        }
      }
    }
}

function moveAndCheckBound(ele) {
  for(let i = 0; i<=buttons.length; i++) {
    if(ele === buttons[i]) {
        checkBound(i);
        break;
    }
  }
}

function checkBound(pos) {
  switch(pos) {
    case 0:
      if(currY >0) {
          currY--;
          repaint();
      }
      break;
    case 1:
      if(currY < oneColLength-1) {
          currY++;
          repaint();
      }
      break;
    case 2:
      if(currX > 0) {
        currX--;
        repaint();
      }
      break;
    case 3:
      if(currX < rowLength-1) {
        currX++;
        repaint();
      }
      break;
  }
  repaint(); //default case
}

function repaint() {
  removeHighlight();
  matrix[currX][currY].style.backgroundColor = 'green';
}

const cells=document.querySelectorAll（'.cell'）；
console.log（cells.length，“cell length”）
const rowLength=document.querySelectorAll（'.row'）.length；
const rowObj=document.querySelector（'.row'）；
const allRowObjs=document.queryselectoral（'.row'）；
//需要重新审视这一点
const oneColLength=allRowObjs[0].childrence.length；
const oneRowLength=allRowObjs[0]。children.length//4.
设currendex=0；
常量矩阵=新数组（allRowObjs.length）；
设currX=0；
设currY=0；
设计数器=0；
const buttons=document.queryselectoral（'button'）；
for（设i=0；i{
cell.style.backgroundColor='白色'；
})
}
函数getCurrentPos（ele）{
对于（设i=0；i您正在将
宽度
和
高度
设置为
.cell
的100%（或100px）。但它通常不包括defaut浏览器样式中的边框

我刚才补充说：

*{
  box-sizing: border-box;  /* ADDED */
}

并删除了边距…了解更多


const cells=document.querySelectorAll（'.cell'）；
console.log（cells.length，“cell length”）
const rowLength=document.querySelectorAll（'.row'）.length；
const rowObj=document.querySelector（'.row'）；
const allRowObjs=document.queryselectoral（'.row'）；
//需要重新审视这一点
const oneColLength=allRowObjs[0].childrence.length；
const oneRowLength=allRowObjs[0]。children.length；//4
设currendex=0；
常量矩阵=新数组（allRowObjs.length）；
设currX=0；
设currY=0；
设计数器=0；
const buttons=document.queryselectoral（'button'）；
for（设i=0；i{
cell.style.backgroundColor='白色'；
})
}
函数getCurrentPos（ele）{
for（设i=0；i
const cells = document.querySelectorAll('.cell');
console.log(cells.length, 'cell length')
const rowLength = document.querySelectorAll('.row').length;
const rowObj = document.querySelector('.row');
const allRowObjs = document.querySelectorAll('.row');
// need to revisit this
const oneColLength = allRowObjs[0].children.length; 
const oneRowLength = allRowObjs[0].children.length; //4
let currIndex = 0;
const matrix = new Array(allRowObjs.length);
let currX = 0;
let currY = 0;
let counter = 0;
const buttons = document.querySelectorAll('button');

for(let i = 0; i<=rowLength-1; i++) {
    matrix[i] = new Array(oneColLength);
}

// copy cells to matrix
for(let i = 0; i<=rowLength-1; i++) {
  for(let j = 0; j<=oneColLength-1; j++) {
    matrix[i][j] = cells[counter];
    counter++;
  }
}

console.log(matrix.length, 'matrix length');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    removeHighlight();
    moveAndCheckBound(this);
  })
})

cells.forEach(cell => {
  cell.addEventListener('click', function() {
      removeHighlight();
      cell.style.backgroundColor = 'green';
      getCurrentPos(this);
  })
})

function removeHighlight() {
  cells.forEach(cell => {
    cell.style.backgroundColor = 'white';
  })
}

function getCurrentPos(ele) {
    for(let i = 0; i<=matrix.length-1; i++) {
      for(let j = 0; j<=oneColLength-1;j++) {
        if(ele === matrix[i][j]) {
          currX = i;
          currY = j;
        }
      }
    }
}

function moveAndCheckBound(ele) {
  for(let i = 0; i<=buttons.length; i++) {
    if(ele === buttons[i]) {
        checkBound(i);
        break;
    }
  }
}

function checkBound(pos) {
  switch(pos) {
    case 0:
      if(currY >0) {
          currY--;
          repaint();
      }
      break;
    case 1:
      if(currY < oneColLength-1) {
          currY++;
          repaint();
      }
      break;
    case 2:
      if(currX > 0) {
        currX--;
        repaint();
      }
      break;
    case 3:
      if(currX < rowLength-1) {
        currX++;
        repaint();
      }
      break;
  }
  repaint(); //default case
}

function repaint() {
  removeHighlight();
  matrix[currX][currY].style.backgroundColor = 'green';
}


*{
  box-sizing: border-box;  /* ADDED */
}