本文讲解在待办列表中，当勾选复选框时，仅对任务文本应用 `text-decoration: line-through` 样式，而不影响同级的删除按钮——核心方案是将文本包裹在 `` 中并单独控制其样式。

在当前实现中，finishTask() 函数直接对整个 li（即 this.parentNode）设置 textDecoration，导致其所有子元素（包括复选框、文本节点和删除按钮）均继承该样式。由于纯文本节点（Text）无法独立设置 CSS 样式，必须将其包裹在可样式化的 HTML 元素中—— 是最轻量、语义恰当的选择。

✅ 正确做法：用 包裹文本，并精准定位

首先，在 addTask() 函数中，移除原生文本节点创建方式：

// ❌ 删除这一行
// let textItem = document.createTextNode(taskVal);

改用创建带样式的 元素：

let textItem = document.createElement('span');
textItem.textContent = taskVal; // 推荐使用 textContent 而非 innerText（更安全、性能更好）
textItem.classList.add('task-text'); // 可选：便于后续 CSS 管理

然后更新 finishTask() 函数，只操作该 ：

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，减少内存占用。

通过以上调整，即可精准控制样式作用域，实现「仅文本划线，按钮保持原样」的预期效果，同时提升代码健壮性与可维护性。

https://www.php.cn/faq/2015422.html