待办事项列表中首次点击任务项无法立即添加删除线，需双击才触发样式切换，根本原因是 JavaScript 读取 element.style.visibility 仅获取内联样式，而初始隐藏状态由 CSS 类定义，未被识别。
待办事项列表中首次点击任务项无法立即添加删除线，需双击才触发样式切换，根本原因是 javascript 读取 `element.style.visibility` 仅获取内联样式，而初始隐藏状态由 css 类定义，未被识别。
在实现待办事项（To-Do List）的「单击划掉」功能时，一个常见却易被忽视的问题是：新添加的待办项首次点击需双击才生效。这并非浏览器或事件机制异常，而是源于对 CSS 样式来源与 DOM 属性访问方式的误解。
核心问题在于以下判断逻辑：
if (markIcon.style.visibility == "hidden") { ... }
element.style 仅反映通过 JavaScript 直接设置的内联样式（如 el.style.visibility = 'hidden'），而你的 CSS 文件中已通过 .markIcon { visibility: hidden; } 定义了默认状态——该规则不会写入 style 属性，因此 markIcon.style.visibility 初始值为空字符串 ""，导致条件恒为 false，第一次点击执行的是 else 分支（即“隐藏 → 显示”），第二次点击才进入预期逻辑。
✅ 正确解决方案（推荐）
方式一：初始化内联样式（最直观）
在创建 markIcon 元素后，显式设置其初始可见性：
const markIcon = document.createElement("span");
markIcon.classList.add("markIcon");
markIcon.innerHTML = "✓";
markIcon.style.visibility = "hidden"; // ← 关键：确保 style 属性可读
方式二：改用 getComputedStyle() 检测真实渲染状态（更健壮）
替换 addStrike 函数中的判断逻辑：
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() 返回元素最终应用的 CSS 值（含样式表、继承等），不受 style 属性是否手动设置影响，语义更准确。
? 额外优化建议
- 避免重复绑定事件：当前 item.addEventListener("click", addStrike) 在每次 getText() 中调用，若未来支持动态重渲染，需确保不重复绑定（可用 item.replaceWith(newItem) 或检查是否已绑定）。
- 语义化交互区域：将点击区域明确限定在 .markandText 或 .to_do_text 上，而非整个 .item，防止误触删除按钮。
- CSS 状态解耦：建议用单一 class 控制完成态（如 .item.completed），统一管理背景、文字、图标等样式，提升可维护性：
.item.completed {
background-color: #888;
}
.item.completed .to_do_text {
text-decoration: line-through;
color: white;
}
.item.completed .markIcon {
visibility: visible;
}
这样 JavaScript 只需切换 class：
item.classList.toggle("completed");
简洁、高效、符合现代前端实践。
综上，双击问题的本质是样式读取方式与实际样式来源不匹配。通过初始化内联样式或使用 getComputedStyle()，即可让首次点击立即生效，真正实现「所见即所得」的交互体验。
