待办事项列表中首次点击任务项无法立即添加删除线，需双击才触发样式切换，根本原因是 JavaScript 读取 style.visibility 时未考虑 CSS 中的初始声明，导致首次判断始终为 false。
待办事项列表中首次点击任务项无法立即添加删除线，需双击才触发样式切换，根本原因是 javascript 读取 `style.visibility` 时未考虑 css 中的初始声明，导致首次判断始终为 `false`。
在您提供的代码中，markIcon 元素在 CSS 中通过 .markIcon { visibility: hidden; } 设定了默认隐藏状态，但 JavaScript 的 markIcon.style.visibility 仅读取内联样式（inline style），而不会获取 CSS 文件或
✅ 正确解决方案有以下两种（推荐第一种）：
✅ 方案一：初始化内联样式（最直接可靠）
在创建 markIcon 时显式设置其初始 visibility 状态，确保 style.visibility 可被准确读取：
const markIcon = document.createElement("span");
markIcon.classList.add("markIcon");
markIcon.innerHTML = "✓";
markIcon.style.visibility = "hidden"; // ? 关键修复：强制设置内联样式
同时，为保持语义清晰，建议将划线逻辑统一委托给 to_do_text 的类控制，而非依赖 markIcon 的可见性。例如：
function addStrike() {
to_do_text.classList.toggle("to_do_text_on");
delButton.classList.toggle("del_but_on");
item.style.backgroundColor = to_do_text.classList.contains("to_do_text_on")
? "#888888"
: "white";
markIcon.style.visibility = to_do_text.classList.contains("to_do_text_on")
? "visible"
: "hidden";
}
这样既解耦了状态判断逻辑，又避免了对 style 属性的脆弱依赖。
✅ 方案二：使用 getComputedStyle()（更健壮，适合复杂场景）
若需兼容动态样式或避免手动维护内联样式，可改用计算样式：
function addStrike() {
const computed = getComputedStyle(markIcon);
if (computed.visibility === "hidden") {
markIcon.style.visibility = "visible";
// ... 启用划线样式
} else {
markIcon.style.visibility = "hidden";
// ... 移除划线样式
}
}
⚠️ 注意事项：
- 不要混用 visibility 和 display 控制显示/隐藏：visibility: hidden 仍占布局空间，而您的 .item 使用 visibility: hidden 初始化，但后续却用 item.style.display = "none" 删除，存在不一致风险；建议统一用 display 或 opacity + pointer-events 实现更平滑交互。
- input[0].value 存在隐式假设，应改用 document.querySelector('input[type="text"]') 提升可维护性。
- 事件监听器在每次 getText() 中重复绑定（如 item.addEventListener("click", addStrike)），虽无严重副作用，但建议确保不重复绑定（当前逻辑安全，因每次新建 item 是独立节点）。
总结：该问题本质是 DOM 样式访问误区。CSS 声明 ≠ element.style 属性值。修复核心在于——要么初始化内联样式使其可读，要么使用 getComputedStyle() 获取真实渲染状态。推荐方案一，简洁、高效、符合初学者项目维护习惯。
