本文介绍如何修复视频静音按钮图标切换异常的问题，通过正确管理 font awesome 图标类名（fa-volume-up / fa-volume-off）并优化事件绑定方式，实现音量状态与图标显示的精准同步。
本文介绍如何修复视频静音按钮图标切换异常的问题，通过正确管理 font awesome 图标类名（fa-volume-up / fa-volume-off）并优化事件绑定方式，实现音量状态与图标显示的精准同步。
在自定义视频控件中，静音按钮的图标需实时反映当前音频状态：静音时显示 fa-volume-off，取消静音时显示 fa-volume-up。原始代码使用 classList.toggle() 仅操作单个类名，导致类名叠加或缺失（例如连续点击后图标消失），根本原因在于未主动移除旧图标类、添加新图标类。
✅ 正确做法是：同时对两个图标类执行 toggle() —— 这能确保每次点击后，fa-volume-up 和 fa-volume-off 有且仅有一个存在。结合 vid.muted = !vid.muted 的简洁取反赋值，逻辑更健壮、可读性更强。
以下是优化后的完整实现（含 HTML、CSS 和 JavaScript）：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"><video id="myVideo" loop autoplay muted><source src="https://md-testdomein.nl/partyz/wp-content/uploads/2023/12/WEBVERSIE_169_PartyZ_Brandfilm_V8.01.mp4"></source></video><button id="mute-button" type="button"> <i id="mute-button-icon" class="fa fa-volume-off"></i> </button>
video { width: 300px; }
const vid = document.querySelector('#myVideo');
const muteIcon = document.querySelector('#mute-button-icon');
document.querySelector('#mute-button').addEventListener('click', () => {
vid.muted = !vid.muted;
muteIcon.classList.toggle('fa-volume-up');
muteIcon.classList.toggle('fa-volume-off');
});
? 关键改进点说明：
- 初始图标设为 fa-volume-off：因视频默认 muted，图标应与状态一致；
- 移除内联 onclick：改用 addEventListener 实现关注点分离，提升可维护性；
- 双 toggle() 保障类名互斥：避免残留类名导致图标渲染异常；
- 无需条件判断：!vid.muted 直接反转状态，精简逻辑。
? 提示：若项目已升级至 Font Awesome 6+，请将类名替换为 fa-solid fa-volume-high（开启）和 fa-solid fa-volume-xmark（关闭），并引入对应 CDN 链接。始终确保图标字体 CSS 已正确加载，否则图标将显示为方块或空白。
