如何使用纯 javascript 切换 class 字体真棒图标？
[英]How to toggle class for font awesome icons with pure javascript?
问题描述
我正在尝试学习 javascript 并尝试在单击图标时在空圆圈图标和带有复选标记的圆圈之间切换。 但是，它似乎不起作用。
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <script src="https.//kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script> <head> </head> <body> <i class="far fa-circle" id="toggle"></i> <script> document,addEventListener('click'. (event) =>{ if(event.target.id == 'toggle'){ document.getElementById('toggle').classList;toggle("fas fa-check-circle"); } }); </script> </body> </html>
3 个解决方案
解决方案1
2 2020-08-09 21:31:06
有时，定义元素默认值CSS 比使用 is- is-* class 修饰符更有帮助 - 比使用fas类做一些时髦的东西更有帮助。 看一看：
const EL_tog = document.querySelector('#toggle'); EL_tog.addEventListener('click', () => { EL_tog.classList.toggle("is-active"); });
#toggle:before { font-family: "Font Awesome 5 Free"; content: "\f111"; font-style: normal; } #toggle.is-active:before { font-family: "Font Awesome 5 Free"; content: "\f058"; }
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> <i id="toggle"></i>
明天，即使您决定使用其他图标集，您也无需更改 HTML，只需更改您的 CSS。 这毕竟是-所有的事情。
如果您想知道我从哪里得到 CSS content:就像\f111 - 没什么大不了的
解决方案2
1 2020-08-09 21:44:14
一个想法是使用堆叠图标，您只能处理一个 class：
var icon = document.getElementById('toggle'); icon.addEventListener('click', (event) => { icon.querySelector(':last-child').classList.toggle("fa-check-circle"); });
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script> <span class="fa-stack fa-2x" id="toggle"> <i class="far fa-circle fa-stack-2x"></i> <i class="fas fa-stack-2x"></i> <!-- OR "far" for the other version --> </span>
相关： https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
解决方案3
0 2021-12-30 08:55:23
我们可以使用 vanilla JavaScript 来解决这个问题。
只需将onclick侦听器添加到toggle元素即可。 然后将 class fa-circle替换为fa-check-circle 。
const circle = 'fa-circle' const check = 'fa-check-circle' const toggler = document.getElementById('toggle') toggle.onclick = () => { toggler.classList.toggle(circle) toggler.classList.toggle(check) }
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script> <i id="toggle" class="far fa-circle"></i>
另一种方法是使用css只需定义一个新的 class （即active ）与伪属性before像这样：
#toggle.active::before {
content: '\f058';
}
现在，我们将onclick事件添加到toggle元素以添加或删除active的 class：
toggle.onclick = () => {
toggler.classList.toggle('active')
}
const toggler = document.getElementById('toggle') toggle.onclick = () => { toggler.classList.toggle('active') }
#toggle.active::before { content: '\f058'; }
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script> <i id="toggle" class="far fa-circle"></i>
如何在纯JavaScript中切换字体真棒图标
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.