"Pourquoi style.backgroundColor n'a-t-il aucun effet ?"

Question

Essayez de changer la couleur d'une cellule en cliquant dessus.

La cellule est généralement grise et doit devenir rouge lorsque vous cliquez pour la première fois. Lorsque je clique sur la cellule rouge, elle devrait redevenir grise.

function changeColor(cell) {
  var rouge = '#FE2E2E';
  var gris = '#E6E6E6';

  if (cell.style.backgroundColor == gris) {
    cell.style.backgroundColor = rouge;
  } autre {
    if (cell.style.backgroundColor == rouge) {
      cell.style.backgroundColor = gris ;
    }
  } ;
};
#table tr td {
  largeur : 20 px ;
  hauteur : 50px ;
  curseur : pointeur ;
  couleur d'arrière-plan : #E6E6E6 ;
  bordure : 1px noir uni ;
}

    
    ≪/tr>
  


J'ai aussi essayé .style.bgColor, rgb et if (cell.style.backgroundColor === , mais cela n'a pas fonctionné non plus. La valeur de la couleur d'arrière-plan de la cellule a été soit transmise dans .backgroundColor:'', soit transmise dans . bgColor< /em> : indéfini            

Answer 1

Votre code ne fonctionnera pas car lorsque votre code s'exécute pour la première fois, style属性没有设置backgroundColor： style代表元素的内联样式属性，而你的元素在开始时没有内联样式。当你检查元素的背景是否为red或gray时，它既不是红色也不是灰色，因为它没有内联样式（style.backgroundColorest en fait une chaîne vide).

Vous avez plusieurs options :

• Utilisez getComputedStyle来查看元素的background-color, qu'il soit défini en ligne ou non.
• Fournit un cas par défaut qui définira le background-color de l'élément, que l'élément soit déjà défini ou non. (S'il est rouge, passez-le en gris ; sinon, réglez-le en rouge.)

L'une ou l'autre approche peut atteindre ce dont vous avez besoin, en fonction de la flexibilité dont vous avez besoin dans votre solution, je vous laisse décider.

Answer 2

La valeur obtenue à partir de style.backgroundColor peut ne pas être renvoyée dans le même format que lorsqu'elle est définie ; elle est rendue dans le format souhaité par le navigateur.

Une manière peu changeante consiste à stocker un drapeau sur l'élément (voir commentaires) :

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>