"style.BackgroundColor가 효과가 없는 이유는 무엇입니까?"

Question

셀을 클릭하여 셀 색상을 변경해 보세요.

셀은 일반적으로 회색이며 처음 클릭하면 빨간색으로 변합니다. 빨간색 셀을 클릭하면 다시 회색으로 바뀌어야 합니다.

functionchangeColor(cell) {
  var 빨간색 = '#FE2E2E';
  var 회색 = '#E6E6E6';

  if (cell.style.BackgroundColor == 회색) {
    cell.style.BackgroundColor = 빨간색;
  } 또 다른 {
    if (cell.style.BackgroundColor == 빨간색) {
      cell.style.BackgroundColor = 회색;
    }
  };
};

#table tr td {
  너비: 20px;
  높이: 50px;
  커서: 포인터;
  배경색: #E6E6E6;
  테두리: 1px 단색 검정;
}

<table class="table table-bordered" id="table">
  <본문>
    <tr>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
    </tr>
  </tbody>
</table>

또한 .style.bgColor, rgb 및 if (cell.style.BackgroundColor === , 그러나 이 방법도 작동하지 않았습니다. 셀 배경색의 값이 .BackgroundColor:''에 전달되거나 에 전달되었습니다. bgColor< /em>: 정의되지 않음

Answer 1

코드가 처음 실행될 때 style属性没有设置backgroundColor： style代表元素的内联样式属性，而你的元素在开始时没有内联样式。当你检查元素的背景是否为red或gray时，它既不是红色也不是灰色，因为它没有内联样式（style.backgroundColor실제로는 빈 문자열이기 때문에 코드가 작동하지 않습니다.

여러 가지 옵션이 있습니다:

• 인라인 설정 여부에 관계없이 getComputedStyle来查看元素的background-color를 사용하세요.
• 요소가 이미 설정되었는지 여부에 관계없이 요소의 background-color를 설정하는 기본 사례를 제공합니다. (빨간색이면 회색으로 바꾸고, 그렇지 않으면 빨간색으로 설정하세요.)

두 가지 접근 방식 모두 필요한 것을 달성할 수 있으며, 솔루션에 필요한 유연성의 정도에 따라 결정을 내리겠습니다.

Answer 2

style.backgroundColor에서 얻은 값은 설정 시와 동일한 형식으로 반환되지 않을 수 있으며 브라우저가 원하는 형식으로 렌더링됩니다.

최소 변경 방법은 요소에 플래그를 저장하는 것입니다(설명 참조):

으아아아 으아아아 으아아아