Question

我想对图标进行动画处理/替换，但是“ setAttribute”方法似乎不起作用..我的代码有什么问题？

<!DOCTYPE html>
<html>
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>

<body>
<a href="#" class="w3-padding-large w3-hover-grey w3-hide-small w3-right">
<i id="t1" class="iconify" data-icon="ic:round-wifi"></i></a>
<br>
<br>

<button onclick="wifiOff()">OFF</button>
<script>
function wifiOff(){
  var x = document.getElementById("t1");
  if (x.hasAttribute("data-icon")) {
    x.setAttribute("data-icon", "ic:round-wifi-off");
    console.log(x);
  }
}
</script>

</body>
</html>

Answer 1

如上所述，当您替换整个元素时，iconify更新图标。

那么为什么不只是使用按钮单击时隐藏和取消隐藏图标呢？

我相信下面的示例对您有用。

<!DOCTYPE html>
<html>
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
<style>.hidden{display:none;}</style>
<body>
<a href="#" class="w3-padding-large w3-hover-grey w3-hide-small w3-right">
<i id="t1" class="iconify" data-icon="ic:round-wifi"></i><i id="t2" class="iconify hidden" data-icon="ic:round-wifi-off"></i></a>
<br>
<br>

<button onclick="wifiToggle()">OFF</button>
<script>
function wifiToggle(){
  var t1 = document.getElementById("t1");
  var t2 = document.getElementById("t2");
      t1.classList.toggle("hidden");
      t2.classList.toggle("hidden");
}
</script>

</body>
</html>

Answer 2

Iconify似乎不支持此功能。

如果您查看Iconify的来源，您会看到it uses和MutationObserver API在DOM更改时得到通知。尽管该API确实允许通过在观察者配置Iconify does not have this enabled中指定attributes: true来观察DOM属性。因此，它不会得到通知，也不会更新图标。

使用setAttribute（）设置“数据图标”时，Iconify图标未更新

2 个答案: