点击切换元素颜色问题求助：使用.style.color无法正常实现红蓝切换

嘿，我瞅了你的代码，发现问题所在啦：你用style.color设置的是文字颜色，但你的<div class="dot" id="dot_01">是空的，根本没有文字内容，所以就算改了color属性，肉眼也看不到任何变化～

给你两个可行的解决方案：

方案1：修改背景色（适合做色块圆点） #

如果你的dot是想做成一个彩色的圆点，应该用backgroundColor来设置背景颜色，而不是color。调整后的代码如下：

<div class="dot" id="dot_01" onclick="dot_01()"></div>

<script>
var turns = 0; 
function dot_01() { 
  const element = document.getElementById("dot_01");
  if (turns === 0) { 
    turns++; 
    element.style.backgroundColor = 'red'; 
  } else if (turns === 1) { 
    turns--; 
    element.style.backgroundColor = 'blue'; 
  } 
}
</script>

<style>
/* 给dot加基础样式，让它显示成圆点 */
.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}
</style>

方案2：保留color属性（给元素加文字内容） #

如果你确实想修改文字颜色，那得给div加文字内容（比如一个圆点字符或者空格），这样color的变化才能显示出来：

<div class="dot" id="dot_01" onclick="dot_01()">●</div>

<script>
var turns = 0; 
function dot_01() { 
  const element = document.getElementById("dot_01");
  if (turns === 0) { 
    turns++; 
    element.style.color = 'red'; 
  } else if (turns === 1) { 
    turns--; 
    element.style.color = 'blue'; 
  } 
}
</script>

<style>
.dot {
  font-size: 20px;
  cursor: pointer;
}
</style>

额外优化：避免全局变量 #

另外，用全局变量turns不是最优雅的做法，你可以直接通过判断元素当前的颜色来切换，或者用dataset存储状态，比如：

<div class="dot" id="dot_01" onclick="dot_01()"></div>

<script>
function dot_01() { 
  const element = document.getElementById("dot_01");
  // 初始状态为空，默认切换到蓝色；当前是红色也切换到蓝色，否则切回红色
  if (element.style.backgroundColor === 'red' || element.style.backgroundColor === '') {
    element.style.backgroundColor = 'blue';
  } else {
    element.style.backgroundColor = 'red';
  }
}
</script>

<style>
.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  background-color: red; /* 设置初始红色 */
}
</style>

这样就不用依赖全局变量啦，逻辑更清晰～

内容的提问来源于stack exchange，提问作者Benn