待办清单中新增的任务项首次点击需双击才触发删除线效果，根本原因是 JavaScript 读取 markIcon.style.visibility 时未获取到 CSS 中定义的初始 hidden 状态，导致条件判断失效。本文提供两种可靠解决方案。
待办清单中新增的任务项首次点击需双击才触发删除线效果，根本原因是 javascript 读取 `markicon.style.visibility` 时未获取到 css 中定义的初始 `hidden` 状态，导致条件判断失效。本文提供两种可靠解决方案。
在实现待办清单（Todo List）的交互逻辑时，一个常见且易被忽略的细节是：元素的内联样式（element.style.xxx）与 CSS 样式表中定义的样式是完全分离的。element.style.visibility 只能读取通过 JavaScript 直接设置的内联样式（如 el.style.visibility = 'hidden'），而无法读取来自
回顾原始代码中的关键判断：
function addStrike() {
if (markIcon.style.visibility == "hidden") { // ❌ 始终为 ""（空字符串），非 "hidden"
markIcon.style.visibility = "visible";
// ... 启用划掉状态
} else {
markIcon.style.visibility = "hidden";
// ... 恢复未完成状态
}
}
由于 markIcon 的 visibility: hidden 完全由 CSS 类 .markIcon 控制，其 style.visibility 初始值为空字符串 ""，因此 == "hidden" 永远为 false，首次点击会执行 else 分支——即“隐藏 → 显示”，造成视觉上无变化（实际是把原本隐藏的图标显示出来），用户误以为没响应；第二次点击时，style.visibility 已被设为 "visible"，此时判断才真正生效，从而表现出“需双击才划掉”的异常行为。
✅ 解决方案一：显式初始化内联样式（推荐）
在创建 markIcon 元素后，立即为其设置初始 visibility 内联样式，确保 style.visibility 可被正确读取：
// add markicon
const markIcon = document.createElement("span");
markIcon.classList.add("markIcon");
markIcon.innerHTML = "✓";
markIcon.style.visibility = "hidden"; // ✅ 关键修复：显式初始化
这样，首次调用 addStrike() 时，markIcon.style.visibility 就是 "hidden"，条件成立，即可单击启用划掉状态。
✅ 解决方案二：改用 getComputedStyle()（更健壮）
若希望逻辑完全解耦于内联样式（例如未来可能通过 CSS 切换主题），可使用 getComputedStyle() 获取最终渲染样式：
function addStrike() {
const computed = getComputedStyle(markIcon);
if (computed.visibility === "hidden") {
markIcon.style.visibility = "visible";
item.style.backgroundColor = "#888888";
to_do_text.classList.add("to_do_text_on");
delButton.classList.add("del_but_on");
} else {
markIcon.style.visibility = "hidden";
to_do_text.classList.remove("to_do_text_on");
delButton.classList.remove("del_but_on");
item.style.backgroundColor = "white";
}
}
⚠️ 注意：getComputedStyle() 返回的是计算后的样式值（如 "hidden"、"visible"），但它是只读的，修改仍需操作 style 属性。
? 额外优化建议
- 避免重复绑定事件：当前 item.addEventListener("click", addStrike) 在每次 getText() 中执行，若多次添加同一 item（虽本例不会），可能造成重复监听。此处安全，但大型项目建议检查是否已绑定。
- 语义化增强：可将划掉状态交由 data-* 属性管理（如 item.dataset.completed = "true"），使状态逻辑更清晰、更易测试。
- CSS 优先级提示：确保 .to_do_text_on 中的 text-decoration-line: line-through 能覆盖其他可能的装饰样式（如 text-decoration: none），必要时添加 !important（不推荐）或提高选择器特异性。
修复后，新添加的待办项将严格遵循“单击即划掉、再单击恢复”的预期行为，交互体验一致、专业且符合用户直觉。
