前端教程|样式技巧 css删除线实现方法及常用标签属性与js动态操作

CSS删除线玩法大全，手把手教你玩转文字装饰

场景引入：
刚接手公司后台管理系统，产品经理指着用户评论区的"原价"要求："这里得加个删除线，旁边显示折后价！"——这种需求太常见了！今天咱们就彻底搞懂CSS删除线，顺便教你用JS动态控制的小妙招。

CSS删除线基础三件套

text-decoration 最正统写法

.discount {
  text-decoration: line-through; /* 关键属性 */
  color: #999; /* 通常搭配灰色 */
}

特点：

• 浏览器兼容性最好（IE6都支持）
• 删除线颜色默认跟随文字颜色
• 可组合使用：underline overline line-through 能同时出现

<del> 标签语义化写法

原价：<del>299元</del> 现价：199元

适用场景：

• 需要SEO优化的电商页面
• 表示"被删除的内容"，比单纯用<span>更语义化

边框模拟法（自定义样式）

.custom-line {
  position: relative;
  display: inline-block;
}
.custom-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: red;
  transform: rotate(-5deg); /* 倾斜效果 */
}

适用场景：

• 需要红色/波浪线等特殊样式
• 设计师要求删除线带渐变或动画效果

进阶控制技巧

控制删除线粗细和颜色

.special-line {
  text-decoration: line-through;
  text-decoration-thickness: 2px; /* 控制粗细 */
  text-decoration-color: #ff0000; /* 单独改颜色 */
}

注意：

• thickness属性较新（2025年主流浏览器已全面支持）
• 旧版浏览器可用border-bottom模拟

动态添加/移除删除线

// 原生JS操作
const price = document.getElementById('oldPrice');
price.style.textDecoration = 'line-through'; // 添加
price.style.textDecoration = 'none'; // 移除
// jQuery写法（如果项目在用）
$('#oldPrice').css('text-decoration', 'line-through');

点击切换删除线状态

document.querySelector('.toggle-btn').addEventListener('click', () => {
  const text = document.querySelector('.target-text');
  text.classList.toggle('cross-out'); 
});
/* CSS配合 */
.cross-out {
  text-decoration: line-through;
  opacity: 0.6;
}

实战避坑指南

1. 移动端适配问题：
   部分安卓机型对text-decoration-style: dashed（虚线删除线）支持较差，建议用伪元素模拟

2. 打印样式优化：

   

   @media print {
     .print-line {
       text-decoration: line-through !important;
     }
   }

3. 无障碍访问：
   使用<del>时建议搭配aria-label：

   <del aria-label="原价已失效">$99</del>

最新趋势（2025年）：

• CSS text-decoration新增skip-spaces属性，可以控制删除线是否跳过空格
• 渐变色删除线可通过background-clip:text实现

下次产品经理再提删除线需求，你可以自信地说："这个效果，我有至少5种实现方案！" 🎯