How to change color of font-awesome icon by clicking the icon

别说谁变了你拦得住时间么 提交于 2021-02-07 20:20:55

问题


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>

Hi, I am trying to change the font color for font-awesome trash icon by clicking the icon. However, it is not working. I would appreciate any tips on how to get this work.


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.

回答1:


Here's some other options to change an FA icon. The keyword this represents garbage. The .property or .method()/.function() references the icon.

References

.children

.querySelector()

.getElementsByTagName()

.classList

.firstElementChild


Demo

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>



回答2:


You are missing the ); after the closing }:

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>

Note: You don't need to target the parent, you can just give the id to the icon.




回答3:


You are missing the closing parenthesis after your event listener:

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

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


来源:https://stackoverflow.com/questions/49856171/how-to-change-color-of-font-awesome-icon-by-clicking-the-icon

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!