如何避免待办事项应用中删除图标被划线样式影响-html教程-PHP中文网

如何避免待办事项应用中删除图标被划线样式影响

在 JavaScript 实现的待办事项应用中，当为已完成任务添加 text-decoration: line-through 时，若直接作用于元素，会导致其子元素（如删除图标）也被划线；正确做法是将任务文本包裹在独立中，并仅对该文本容器应用划线样式。

在 javascript 实现的待办事项应用中，当为已完成任务添加 `text-decoration: line-through` 时，若直接作用于 `

` 元素，会导致其子元素（如删除图标）也被划线；正确做法是将任务文本包裹在独立 `` 中，并仅对该文本容器应用划线样式。

问题根源在于 CSS 的继承与作用范围：text-decoration 属性虽不继承，但会渲染在包含块内所有行内级内容上——当 图标作为

的子元素存在时，它与文本同处一个行框（inline formatting context），因此划线会横贯整个

宽度，覆盖图标区域。

✅ 正确解决方案：语义化结构 + 精准样式控制

首先，在 JavaScript 中重构 DOM 结构，将任务文本和删除图标分离为两个独立子元素：

function addTask() {
    if (input.value === '') {
        alert("You must write something!");
        return;
    }

    const li = document.createElement("li");
    li.classList.add("task");

    // 文本容器：用于承载可划线的内容
    const taskText = document.createElement("span");
    taskText.textContent = input.value;
    taskText.classList.add("task-text");

    // 删除图标：独立节点，不受 text-decoration 影响
    const icon = document.createElement("i");
    icon.classList.add("icon", "fa-solid", "fa-x");

    li.append(taskText, icon);
    taskContainer.appendChild(li);

    input.value = "";
}

接着，在 CSS 中仅对 .task-text 应用划线效果，并确保布局合理：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

.task {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    font-size: 28px;
    background: rgb(248, 248, 248);
    border-radius: 5px;
    list-style: none;
}

.task-text {
    flex-grow: 1; /* 占据剩余空间，避免图标被挤出 */
    margin-right: 10px; /* 可选：增加文本与图标的间距 */
}

.checked .task-text {
    color: #555;
    text-decoration: line-through;
}

.icon {
    font-size: 25px;
    color: red;
    cursor: pointer;
    /* 不需要 text-decoration: none —— 它本身不是文本，不会被划线 */
}

⚠️ 注意事项：

避免使用 innerHTML 直接插入用户输入（存在 XSS 风险），改用 textContent 更安全；

.checked 类应作用于

，再通过 .checked .task-text 选择器精准控制样式，而非直接给

添加 text-decoration；

删除图标点击事件无需修改，因 e.target.tagName === "I" 仍能准确捕获；

若需增强交互反馈，可为 .icon:hover 添加缩放或颜色变化效果。

通过这种结构分离策略，不仅解决了划线误覆盖图标的问题，还提升了代码可维护性与样式可控性——文本与操作控件职责清晰，样式规则边界明确，为后续扩展（如编辑、拖拽、优先级标记等）打下良好基础。