Question

我正在开展一个小项目，以了解有关Javascript的更多信息，以便将来可以处理svg动画。

现在我正在处理一个按钮，当你点击它时会改变他的输入。

＆＃13;

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";
}

＆＃13;

.circle {
  width: 200px; height: 200px;
  background-color: #10ac84;
  border-radius: 50%;
} 
.circle svg  { font-size: 1.5em; }

＆＃13;

<div class="circle" id="circle">
  <i class="fas fa-trash-alt" id="remove"></i>
  <i class="fas fa-undo" id="undo"></i>
</div>

＆＃13;

将它放在一个片段中有点困难，因为我无法加载字体真棒cdn。

- |我想做什么| -

当您进入页面时，圆圈将在垃圾桶上显示一个图标。当用户点击圈子时，垃圾桶将消失，撤消图标将显示。这是为了删除我的应用程序中的项目，并在需要时将其撤消。

- |问题| -

我可以删除FontAwesome图标并添加样式吗？因为它将转变为SVG的

我希望我已经解释得很好，有人可以帮助我。

项目：http://www.projectnova.nl/changeClick/

Answer 1

请注意，此方法仅在使用带有CSS的Font Awesome时有效。要使用带有SVG方法的JavaScript，请查看其他答案。

如果您使用单个i代码并动态更改图标class，则会更容易实现。

例如：

<div class="circle">
    <i class="fas fa-trash-alt" id="remove"></i>
</div>

然后，您只需在fa-undo和fa-trash-alt类之间切换。

// select the element
var removalIcon = document.querySelector("#remove");

// add event listener
removalIcon.addEventListener("click", function () {
    this.className = "fas fa-undo";
});

Answer 2

确保在使用SVG with JavaScript方法时定位正确的元素。在替换后您无法选择<i>。

Font Awesome使用mutation observers知道更改课程后何时需要更改SVG。

＆＃13;

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");
  }
});

＆＃13;

<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>

＆＃13;

用Javascript操纵FontAwesome

2 个答案: