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>
最佳答案
您缺少 );
在结束 }
之后:
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
提供给图标。
关于javascript - 如何通过单击图标更改超赞字体图标的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49856171/