JavaScript移除font-weight事件监听失效问题求助

安全阿岳

2026-8-3

解决点击Bold按钮切换粗体/取消粗体的问题

你的问题核心在于两点：一是定义的removeEvent函数从未被调用，二是用移除事件的方式实现切换效果完全没必要。正确的做法是在同一个点击事件里判断当前状态，直接切换样式。

方案一：直接操作行内样式

修改后的JavaScript代码如下：

const boldBtn = document.querySelector(".bold");
const italic = document.querySelector(".italic");
const fonce = document.querySelector(".fonce");

function toggleBold() {
    // 阻止a标签默认跳转行为
    event.preventDefault();
    // 判断当前是否为粗体状态
    const currentIsBold = boldBtn.style.fontWeight === "bold";
    // 确定要设置的字体粗细
    const targetWeight = currentIsBold ? "normal" : "bold";
    
    // 给所有目标元素设置样式
    boldBtn.style.fontWeight = targetWeight;
    italic.style.fontWeight = targetWeight;
    fonce.style.fontWeight = targetWeight;
}

// 绑定点击事件，每次点击都会切换状态
boldBtn.addEventListener("click", toggleBold);

方案二：用CSS类切换（更推荐）

这种方式将样式与逻辑分离，更易维护。

首先添加CSS类：

.text-bold {
    font-weight: bold;
}

然后修改JavaScript代码：

const boldBtn = document.querySelector(".bold");
// 收集所有需要切换粗体的元素
const targetElements = [
    boldBtn,
    document.querySelector(".italic"),
    document.querySelector(".fonce")
];

function toggleBold() {
    event.preventDefault();
    // 给每个元素切换text-bold类
    targetElements.forEach(el => el.classList.toggle("text-bold"));
}

boldBtn.addEventListener("click", toggleBold);