onClick 背景颜色变化答案

【问题标题】：onClick backgroundColor changeonClick 背景颜色变化
【发布时间】：2014-09-14 11:18:24
【问题描述】：

我从飞镖开始，我得到了我的第一个问题。

当有人点击它时，我想制作着色行。

默认我的背景颜色是白色的，当我点击它时它会变成黄色，但是当我点击它时它是黄色的，它不会再次变成白色

代码：

 void changeText(MouseEvent event) {
  if(querySelector("#Column_1").style.backgroundColor == 'Yellow')
    querySelector("#Column_1").style.backgroundColor = 'White';

  else querySelector("#Column_1").style.backgroundColor = 'Yellow';
}

【问题讨论】：

你想要它在 jquery 还是 javascript 中？ Check

标签： css dart dart-html

【解决方案1】：

即使您将它们设置为大写，这些值也会返回小写。如果它们不相同，则比较失败。

void changeText(MouseEvent event) {
  var col = querySelector('#Column_1'); 
  if(col.style.backgroundColor.toLowerCase() == 'white') {
    col.style.backgroundColor = 'yellow';
  } else {
    col.style.backgroundColor = 'white';
  }
}

我不知道为什么我之前没有从 style 属性中获得任何值，但现在这对我有用。

我还是建议改用 CSS 和类。

当你把它放在你的 HTML 的 <head> 或者你的 CSS 文件中，如果你使用一个

<style>
  .isSelected {
    background-color: yellow;
  }
</style>

并将您的 textChange 方法更改为

void changeText(MouseEvent event) {
  var col = querySelector('#Column_1').classes.toggle("isSelected");
}

你应该得到你想要的效果。

【讨论】：

我更新了我的答案。上一个建议仍然是首选。