如何通过点击图标更改Font Awesome图标的颜色

Question

var garbage = document.getElementById("garbage");

garbage.addEventListener("click",function(){
  garbage.style.color = "#66c144";
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

<div id="garbage">
  <i class="fas fa-trash"></i>
</div>

你好，我想通过点击font-awesome垃圾桶图标来更改字体颜色，但是这并没有起作用。希望能得到关于如何解决这个问题的任何建议。

---

var trash = document.getElementById("trash"),
    glass = document.getElementById("glass"),
    organic = document.getElementById("organic"),
    plastic = document.getElementById("plastic"),
    paper = document.getElementById("paper");

trash.addEventListener("click",function(){
    this.children[0].style.color = "#66c144";
    glass.children[0].style.color = "#ffffff";
    organic.children[0].style.color = "#ffffff";
    plastic.children[0].style.color = "#ffffff";
    paper.children[0].style.color = "#ffffff";
});

glass.addEventListener("click",function(){
    this.children[0].style.color = "#66c144";
    trash.children[0].style.color = "#ffffff";
    organic.children[0].style.color = "#ffffff";
    plastic.children[0].style.color = "#ffffff";
    paper.children[0].style.color = "#ffffff";
    
});

organic.addEventListener("click",function(){
    this.children[0].style.color = "#66c144";
    trash.children[0].style.color = "#ffffff";
    glass.children[0].style.color = "#ffffff";
    plastic.children[0].style.color = "#ffffff";
    paper.children[0].style.color = "#ffffff";
    
});

plastic.addEventListener("click",function(){
    this.children[0].style.color = "#66c144";
    trash.children[0].style.color = "#ffffff";
    glass.children[0].style.color = "#ffffff";
    organic.children[0].style.color = "#ffffff";
    paper.children[0].style.color = "#ffffff";
});

paper.addEventListener("click",function(){
    this.children[0].style.color = "#66c144";
    trash.children[0].style.color = "#ffffff";
    glass.children[0].style.color = "#ffffff";
    organic.children[0].style.color = "#ffffff";
    plastic.children[0].style.color = "#ffffff";
});

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

          <div class="icons flex">
                <div id="trash">
                    <i class="fas fa-trash"></i> 
                </div>    
                <div id="glass">
                    <i class="fas fa-wine-glass"></i>
                </div>
                <div id="organic">
                    <i class="fab fa-envira"></i>
                </div>
                <div id="plastic">
                    <i class="far fa-hdd"></i>
                </div>    
                <div id="paper">
                    <i class="far fa-newspaper"></i>
                </div>    
          </div>

UPDATE So Thanks to everyone's help, I managed to get the result I wanted (Every time I click a different icon, only the icon I click has the different color). On top of that, I am curious if there is a less repetitive or messy way to execute what I have now like using "Function" or something. I would appreciate if I can get some tips on it.

- Jun Jung

---

你需要更改 i 元素的颜色，而非 div。 - לבני מלכה

此代码存在语法错误。另外，您的类名为“fas”，如果我没记错的话应该是“fa”。最后，您正在为div元素设置样式，而不是i元素，这可能会被覆盖。 - roberrrt-s

@Roberrrt Op正在使用Font Awesome 5，该库使用fas前缀。 - Matheus Cuba

@MatheusCuba 哦，我明白了！ - roberrrt-s

这可能仍然是无意义的。除非您向我们展示“未能正常工作”的具体内容，否则我们只能告诉您，您很可能做错了某些事情。 - CBroe

Answer 1

您在闭合的 } 后面缺少 ); ：

var garbage = document.getElementById("garbage");

garbage.addEventListener("click",function(){
  garbage.style.color = "#66c144";
});

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

<div id="garbage">
  <i class="fas fa-trash"></i>
</div>

注意：您不需要将目标指向父级元素，只需将id赋给图标即可。

- VXp

Answer 2

以下是更改FA图标的其他选项。关键字this表示垃圾。 .property或.method()/.function()引用图标。

参考资料

.children

.querySelector()

.getElementsByTagName()

.classList

.firstElementChild

---

演示

var garbage = document.getElementById("garbage");

garbage.addEventListener("click", function() {
  this.children[0].style.color = "#66c144";
  this.querySelector('.fas').style.fontSize = '3rem';
  this.getElementsByTagName('I')[0].classList.toggle('fa-spin');
  this.firstElementChild.style.transition = 'color 1.5s ease 1.25s, font-size 0.75s ease-out';
}, false);

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

<div id="garbage">
  <i class="fas fa-trash"></i>
</div>

- zer00ne

---

哇，你真是救星啊。我得习惯使用所有这些方法。非常感谢你！ - Jun Jung

太好了，我本来还想通过事件对象添加另一种引用方式，但是我担心会让人感到混淆。如果你有兴趣使用event.target作为引用，请阅读这篇**文章，当你了解事件的要点后，再阅读这篇文章**。 - zer00ne

幸运的是，我能够掌握这个概念。我还没有完全理解，比如“false”部分（我猜这会停止图标旋转？）。event.target似乎非常有用，因为它帮助我解决了上次的“如何删除对象”的问题。我会阅读它；另外我已经更新了我的最终结果，但是你能否看一下是否有更少冗余的方法呢？谢谢。 - Jun Jung

嗨@YongJunJung，false部分是具有欺骗性的，它是addEventListener()的第三个可选参数，默认情况下为false。当为false时，eventListener将在冒泡阶段（目标阶段之后，如单击或悬停 - 非常短）调用回调。True表示回调函数将在捕获阶段（目标阶段之前）调用。捕获阶段很少使用，我发现它有用的唯一时间是处理键盘事件（keyup，keydown）。使图标停止旋转的原因是它是一个被切换的类，fa-spin是FA的特殊类。 - zer00ne

请看我的主帖中的评论，另外你应该发一篇关于你下一个问题的帖子，否则版主会抱怨你的帖子有多个问题。 - zer00ne

嗯...我有点明白了。布尔值仍然让我感到困惑。哦，我明白了，直到我使用它之前，我不知道font-awesome有多强大。谢谢！ - Jun Jung

Answer 3

你的事件监听器缺少闭合括号：

var garbage = document.getElementById("garbage");

garbage.addEventListener("click",function(){
    garbage.style.color = "#66c144";
});

- Sam

---

我居然因为在另一个人之前一分钟发布了完全相同的答案而被严重地点踩？难以置信。 - Sam

@VXp，Sam Littlefair没有编辑过它，在头像左侧没有链接，他比你先回答了1分钟。不管怎样，我都点了赞。Littlefair先生因为正确回答了问题，而您则在回答中附上了[mcve]，也是正确的。 - zer00ne

@zer00ne 因为提供了有用的额外信息和整体上的好回答，所以我“回报”了他。我知道，这就是为什么我写“5分钟内”，因为如果您在该时间范围内完成，链接将不会出现。我认为他做到了，否则为什么他会得到-2分。 - VXp

@VXp 不知道有不到5分钟的编辑窗口，好知道，谢谢。不确定为什么会有-2，还有另一个被删除的答案也被踩了，但它与你的答案完全相同，只是缺少了<link>，这可能是测试时看起来不对的原因。 - zer00ne

@zer00ne 没问题，伙计，是的，很可能是因为那个原因。 - VXp