"Kenapa style.backgroundColor tiada kesan?"

Question

Cuba tukar warna sel dengan mengklik padanya.

Sel biasanya berwarna kelabu dan harus bertukar merah apabila diklik buat kali pertama. Apabila saya mengklik pada sel merah ia akan bertukar menjadi kelabu semula.

function changeColor(sel) {
  var merah = '#FE2E2E';
  var kelabu = '#E6E6E6';

  if (cell.style.backgroundColor == kelabu) {
    cell.style.backgroundColor = merah;
  } lain {
    if (cell.style.backgroundColor == merah) {
      cell.style.backgroundColor = kelabu;
    }
  };
};

#table tr td {
  lebar: 20px;
  ketinggian: 50px;
  kursor: penunjuk;
  warna latar belakang: #E6E6E6;
  sempadan: 1px hitam pejal;
}

<table class="table table-bordered" id="table">
  <tbody>
    <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>

Saya juga mencuba .style.bgColor, rgb dan if (cell.style.backgroundColor === , tetapi ini juga tidak berfungsi. Nilai warna latar belakang sel sama ada dihantar dalam .backgroundColor:'', atau diluluskan dalam . bgColor< /em>: undefined

Answer 1

Kod anda tidak akan berfungsi kerana apabila kod anda mula-mula dijalankan, style属性没有设置backgroundColor： style代表元素的内联样式属性，而你的元素在开始时没有内联样式。当你检查元素的背景是否为red或gray时，它既不是红色也不是灰色，因为它没有内联样式（style.backgroundColorsebenarnya rentetan kosong).

Anda mempunyai beberapa pilihan:

• Gunakan getComputedStyle来查看元素的background-color tanpa mengira sama ada ia ditetapkan sebaris atau tidak.
• Menyediakan kes lalai yang akan menetapkan elemen background-color tidak kira sama ada elemen telah ditetapkan. (Jika merah, tukar kepada kelabu; jika tidak, tetapkan kepada merah.)

Mana-mana pendekatan boleh mencapai apa yang anda perlukan, bergantung pada berapa banyak fleksibiliti yang anda perlukan dalam penyelesaian anda, saya akan menyerahkan kepada anda untuk membuat keputusan.

Answer 2

Nilai yang diperoleh daripada style.backgroundColor mungkin tidak dikembalikan dalam format yang sama seperti yang ditetapkan;

Cara yang berubah secara minimum ialah dengan menyimpan bendera pada elemen (lihat ulasan):

function changeColor(cell) {
  var red = '#FE2E2E';
  var grey = '#E6E6E6';
  
  // 获取标志；如果不存在，则为假值
  var flag = cell.getAttribute("data-grey");

  if (!flag) {
    // 变为灰色
    cell.setAttribute("data-grey", "true");
    cell.style.backgroundColor = red;
  } else {
    // 不是灰色，变为红色
    cell.setAttribute("data-grey", ""); // 空值为假值
    cell.style.backgroundColor = grey;
  }
}

#table tr td {
  width: 20px;
  height: 50px;
  cursor: pointer;
  background-color: #E6E6E6;
  border: 1px solid black;
}

<table class="table table-bordered" id="table">
  <tbody>
    <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>