点击按钮切换SVG元素类失效问题求助

你的核心问题是SVG的fill样式没有正确响应类切换，原因是当前CSS只给SVG元素本身设置了fill属性，但SVG的填充样式实际作用在内部的<path>元素上，直接给SVG加类不会影响到path的样式。

解决方案：修正CSS选择器 #

把你的CSS改成下面任意一种写法，让.pressed类的样式穿透到SVG内部的path：

/* 方案1：通过SVG的pressed类控制内部path */
#edit-svg.pressed path {
  fill: #19ba00;
}

/* 方案2：通过按钮的pressed类控制，更简洁 */
.control-btn.pressed svg path {
  fill: #19ba00;
}

对应调整JavaScript（如果用方案2） #

如果选择方案2，你不需要单独获取SVG元素，直接切换按钮的类即可：

editButton.addEventListener("click", () => {
    let allCellInputs = document.querySelectorAll(".cellInput");
    for (let i = 0; i < allCellInputs.length; i++) {
        allCellInputs[i].toggleAttribute("disabled");
    }
    // 切换按钮的类，而非SVG的类
    editButton.classList.toggle("pressed");
});

验证方法 #

手动给SVG（或按钮）加上pressed类，刷新页面看path是否变成绿色，以此确认CSS是否生效。

原代码说明 #

你的JavaScript逻辑本身没有问题，classList.toggle()是正确的类切换方法，只是CSS选择器没有命中实际需要修改样式的path元素，导致视觉上没有变化。

内容的提问来源于stack exchange，提问作者flexbeatz