本文讲解在待办列表中，当勾选复选框时，仅对任务文本应用 `text-decoration: line-through` 样式，而不影响同级的删除按钮——核心方案是将文本包裹在 `` 中并单独控制其样式。
在当前实现中，finishTask() 函数直接对整个 li（即 this.parentNode）设置 textDecoration，导致其所有子元素（包括复选框、文本节点和删除按钮）均继承该样式。由于纯文本节点（Text）无法独立设置 CSS 样式，必须将其包裹在可样式化的 HTML 元素中——<span> 是最轻量、语义恰当的选择。
✅ 正确做法：用 <span> 包裹文本，并精准定位
首先，在 addTask() 函数中，移除原生文本节点创建方式：
// ❌ 删除这一行 // let textItem = document.createTextNode(taskVal);
改用创建带样式的 <span> 元素：
let textItem = document.createElement('span');
textItem.textContent = taskVal; // 推荐使用 textContent 而非 innerText（更安全、性能更好）
textItem.classList.add('task-text'); // 可选：便于后续 CSS 管理然后更新 finishTask() 函数，只操作该 <span>：
function finishTask() {
const textSpan = this.parentNode.querySelector('span.task-text');
if (textSpan) {
textSpan.style.textDecoration = this.checked ? 'line-through' : 'none';
}
}? 提示：使用 textContent 替代 innerText 可避免潜在的布局触发与 XSS 风险；添加 class（如 task-text）能提升选择器精确性，防止误匹配其他 span。
? 完整修正后的关键代码片段
function addTask() {
const taskVal = taskBox.value.trim();
if (!taskVal) {
alert('Task Box Empty');
return;
}
const itemDiv = document.createElement('li');
const itemCheck = document.createElement('input');
const textItem = document.createElement('span'); // ✅ 改为 span
const itemDelete = document.createElement('button');
itemDiv.classList.add('itemDiv');
itemCheck.type = 'checkbox';
itemCheck.name = 'finished';
textItem.textContent = taskVal;
textItem.classList.add('task-text');
itemDelete.textContent = 'x';
// 挂载结构
taskList.appendChild(itemDiv);
itemDiv.append(itemCheck, textItem, itemDelete); // 更简洁的 append 用法
// 绑定事件
itemCheck.onclick = finishTask.bind(itemCheck);
itemDelete.onclick = deleteItem.bind(itemDiv);
taskBox.value = '';
}
function finishTask() {
const textSpan = this.parentNode.querySelector('.task-text');
textSpan.style.textDecoration = this.checked ? 'line-through' : 'none';
}⚠️ 注意事项
- 不要重复使用 ID：原代码中 itemCheck.id = "checkbox" 在多次添加任务后会导致多个元素拥有相同 ID，违反 HTML 规范。应改用 class 或动态生成唯一 ID（如 checkbox-${taskCount}）。
-
避免内联样式污染：长期建议将样式抽离至 CSS，例如：
.task-text.completed { text-decoration: line-through; }然后在 JS 中切换类名：textSpan.classList.toggle('completed', this.checked) —— 更易维护、支持过渡动画、符合关注点分离原则。
- 事件委托优化（进阶）：若任务量大，可考虑为 #taskList 统一监听 change 事件，而非为每个复选框绑定 onclick，减少内存占用。
通过以上调整，即可精准控制样式作用域，实现「仅文本划线，按钮保持原样」的预期效果，同时提升代码健壮性与可维护性。
