异常教程

JavaScript strike() 方法（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，我们常需要对文本内容进行视觉修饰，例如添加删除线以表示“已过期”或“已失效”的信息。虽然 JavaScript 并没有直接提供名为 strike() 的原生方法，但通过结合 HTML 标签与 DOM 操作技术，我们可以轻松实现类似效果。本文将深入解析这一需求的核心逻辑，帮助开发者掌握灵活控制文本样式的技巧。

什么是删除线效果？

删除线（Strikethrough）是一种常见的文本装饰样式，通常用于标记内容的“旧状态”。在 HTML 中，早期使用 <strike> 标签实现这一效果，但现代 Web 开发更推荐使用语义更清晰的 <del> 或 <s> 标签。不过，当我们需要通过 JavaScript 动态控制删除线的显示时，必须借助 CSS 属性与 DOM 操作技术。

HTML 标签的演变

  • 过时标签 <strike>：功能明确但语义模糊，已不推荐使用。
  • 语义化标签 <del>：明确表示内容被删除，适合记录修改历史。
  • 通用标签 <s>：保留删除线样式，但缺乏明确语义。

比喻：这就像给文本穿上不同风格的外套，<del> 是正式西装，<s> 是休闲卫衣，而 <strike> 则是过时的旧款式。

JavaScript 实现删除线的底层逻辑

要通过 JavaScript 动态添加删除线效果，核心在于操作元素的 CSS 样式属性 text-decoration。具体有两种实现方式：

  1. 直接操作 style 属性：通过 element.style.textDecoration = 'line-through' 快速修改样式。
  2. 添加/移除 CSS 类：通过 classList 方法与预定义的 CSS 类协作，提升代码可维护性。

方法对比

方法类型优点缺点
直接修改 style简单快捷，无需额外 CSS 文件样式分散，难以统一维护
使用 CSS 类集中式管理样式，代码更整洁需预先定义 CSS 类

关键代码示例：

// 方法1：直接修改 style 属性
const element = document.getElementById('myText');
element.style.textDecoration = 'line-through';

// 方法2：使用 CSS 类
element.classList.add('strikethrough');

动态控制删除线的进阶技巧

1. 根据条件动态切换样式

结合条件判断，可以实现删除线的“开关”功能。例如，当用户点击按钮时，切换元素的样式状态。

function toggleStrike(elementId) {
  const element = document.getElementById(elementId);
  if (element.style.textDecoration === 'line-through') {
    element.style.textDecoration = 'none';
  } else {
    element.style.textDecoration = 'line-through';
  }
}

比喻：这就像为文本安装一个“开关”，用户轻触按钮即可控制删除线的显示或隐藏。

2. 批量操作多个元素

当需要对一组元素应用相同样式时，可以通过 querySelectorAll 选择器批量操作：

document.querySelectorAll('.price').forEach(element => {
  element.style.textDecoration = 'line-through';
});

代码扩展：
如果希望仅对价格超过 100 的元素添加删除线，可以结合数据属性实现：

document.querySelectorAll('[data-price]').forEach(element => {
  const price = parseInt(element.dataset.price);
  if (price > 100) {
    element.classList.add('strikethrough');
  }
});

3. 结合 CSS 过渡效果

通过 CSS 的 transition 属性，可以为删除线的显示添加平滑动画效果：

.strikethrough {
  text-decoration: line-through;
  transition: text-decoration 0.3s ease;
}

配合 JavaScript 的 setTimeout，可以实现延迟显示删除线：

setTimeout(() => {
  document.getElementById('dynamicElement').classList.add('strikethrough');
}, 1000);

常见问题与解决方案

Q1：为什么直接修改 style 后样式未生效？

可能原因：

  • 元素 ID 或选择器错误，导致获取到 null。
  • 样式名称拼写错误（如 text-decoration 应写为 textDecoration）。

解决方案：
使用开发者工具检查元素，确认目标元素已被正确选中，并核对样式名称是否符合驼峰式写法。

Q2：如何同时控制字体颜色和删除线？

通过组合 CSS 属性即可实现：

element.style.textDecoration = 'line-through';
element.style.color = '#ff0000';

最佳实践：
将多条样式定义在 CSS 类中，通过 classList 一次性应用：

.red-strikethrough {
  text-decoration: line-through;
  color: #ff0000;
}

Q3：如何兼容旧版浏览器？

对于不支持 text-decoration 的老旧浏览器（如 IE9 以下），可以采用 text-decoration-line 属性的替代方案：

element.style.textDecorationLine = 'line-through';

结论

通过 JavaScript 动态控制删除线效果，本质上是 CSS 样式操作与 DOM 操作的结合。开发者可根据项目需求选择直接修改样式或使用 CSS 类的方式，同时需注意代码的可维护性和浏览器兼容性。掌握这一技巧后，可以轻松实现如“限时折扣”“历史价格对比”等常见功能，为用户带来更直观的交互体验。

关键总结：

  • 删除线效果的核心是 text-decoration CSS 属性。
  • JavaScript 通过 style 属性或 classList 方法实现动态控制。
  • 结合 CSS 类与条件逻辑，可构建复杂交互场景。

希望本文能帮助开发者在实际项目中灵活运用这一技术，进一步提升网页的视觉表达能力。

最新发布

查看更多文章