我正在做一个小项目来学习更多关于 Javascript 的知识，这样我将来就可以研究 svg 动画了。
现在我正在开发一个按钮，当你点击它时，它会改变他的输入。
circle = document.getElementById('circle');
$remove = document.getElementById('remove');
remove.style.display = "block";
$undo = document.getElementById('undo');
undo.style.display = "none";
circle.onclick = function() {
remove.style.display = "none";
undo.style.display = "block";
}
.circle {
width: 200px; height: 200px;
background-color: #10ac84;
border-radius: 50%;
}
.circle svg { font-size: 1.5em; }
<div class="circle" id="circle">
<i class="fas fa-trash-alt" id="remove"></i>
<i class="fas fa-undo" id="undo"></i>
</div>
将其放入片段中有点困难，因为我无法加载 font Awesome cdn。
-|我正在尝试做什么|-
当您进入该页面时，圆圈上将有一个垃圾桶图标。
当用户单击圆圈时，垃圾桶将消失并显示撤消图标。
这是为了删除我的应用程序中的一个项目，并在需要时将其撤消。
-|问题|-
我可以删除 Font Awesome 图标并为其添加样式吗？因为它会转变成 SVG
我希望我已经解释得很好并且有人可以帮助我。
项目：http://www.projectnova.nl/changeClick/
每当您使用时，请确保定位到正确的元素带有 JavaScript 的 SVG方法。不会有一个<i>供您更换后选择。
Font Awesome 用途突变观察者了解更改类后何时需要更改 SVG。
document.getElementsByTagName("button")[0].addEventListener("click", evt => {
const icon = evt.currentTarget.querySelector("svg");
if (icon.classList.contains("fa-user")) {
icon.classList.remove("fa-user");
icon.classList.add("fa-github-square");
} else {
icon.classList.remove("fa-github-square");
icon.classList.add("fa-user");
}
});
<script defer src="https://use.fontawesome.com/releases/v5.0.12/js/all.js" integrity="sha384-Voup2lBiiyZYkRto2XWqbzxHXwzcm4A5RfdfG6466bu5LqjwwrjXCMBQBLMWh7qR" crossorigin="anonymous"></script>
<button><i class="fas fa-user"></i></button>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
