HTML DOM Style textDecoration 属性（长文解析）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，文本的视觉表现力直接决定了用户体验的质量。HTML DOM Style textDecoration 属性 是控制文本装饰（如下划线、删除线等）的核心工具之一。无论是为链接添加悬停效果，还是动态修改文本样式，这一属性都能提供高效且灵活的解决方案。本文将从基础概念出发，结合代码示例和实际场景，帮助开发者掌握其用法，尤其适合编程初学者和中级开发者逐步深入。

一、基础概念：什么是 HTML DOM Style textDecoration 属性？

1.1 DOM 与样式的关系

DOM（文档对象模型） 是网页内容的树形结构表示，它允许通过 JavaScript 直接操作网页元素的属性、样式和内容。而 Style 对象 是 DOM 节点中的一个属性，用于控制元素的 CSS 样式。

textDecoration 属性 是 Style 对象中的一个关键属性，用于设置或返回元素的文本装饰效果。它的作用类似于 CSS 的 text-decoration 属性，但通过 JavaScript 直接操作 DOM，能够实现动态效果。

1.2 与 CSS 的区别

虽然 textDecoration 属性 的功能与 CSS 的 text-decoration 类似，但两者在使用场景上有本质区别：

• CSS 通过样式表定义静态样式，适用于全局或预设效果；
• DOM Style textDecoration 通过 JavaScript 动态修改样式，适合交互式场景（如点击按钮改变文本样式）。

比喻：可以把 CSS 比作建筑设计图，而 DOM Style 则是施工队在建造过程中根据需求实时调整材料。

二、属性值详解：如何定义文本装饰效果？

2.1 核心属性值列表

以下表格总结了 textDecoration 属性 的常用值及其效果：

注意：多个值可用空格分隔（如 textDecoration: "underline overline"），但需注意浏览器兼容性。

2.2 常见组合与效果

• 基础组合：

  // 为元素添加下划线和删除线  
  element.style.textDecoration = "underline line-through";  
  

• 动态切换：

  // 点击按钮时切换文本装饰  
  button.addEventListener("click", () => {  
    element.style.textDecoration = element.style.textDecoration === "none" ? "underline" : "none";  
  });  
  

三、实战案例：如何在项目中使用？

3.1 案例 1：动态修改链接样式

需求：当用户悬停（hover）在链接上时，移除下划线并添加背景色。

代码实现：

<a id="dynamicLink" href="#">点击我</a>  

<script>  
  const link = document.getElementById("dynamicLink");  

  link.addEventListener("mouseover", () => {  
    link.style.textDecoration = "none";  
    link.style.backgroundColor = "#f0f0f0";  
  });  

  link.addEventListener("mouseout", () => {  
    link.style.textDecoration = "underline";  
    link.style.backgroundColor = "transparent";  
  });  
</script>  

解析：通过监听 mouseover 和 mouseout 事件，动态修改 textDecoration 和 backgroundColor，实现交互效果。

3.2 案例 2：根据状态显示删除线

需求：在购物车中，当商品已售罄时，为商品名称添加删除线。

代码实现：

<div id="product">  
  <p id="productName">限量款手机（库存：0）</p>  
</div>  

<script>  
  const product = document.getElementById("productName");  

  // 假设通过 API 获取库存状态  
  const isOutOfStock = true;  

  if (isOutOfStock) {  
    product.style.textDecoration = "line-through red"; // 自定义颜色（需注意兼容性）  
    product.style.color = "#cc0000";  
  }  
</script>  

提示：虽然直接在 textDecoration 中设置颜色可能不兼容，但可通过 color 属性间接实现视觉效果。

四、进阶技巧与注意事项

4.1 浏览器兼容性

• 旧版浏览器支持问题：部分属性值（如 blink）在现代浏览器中已被废弃，需避免使用。
• 解决方案：通过 CSS 调用 @supports 声明或使用 Polyfill 库。

4.2 性能优化

• 避免频繁操作 DOM：如果需要频繁修改样式，建议优先使用 CSS 类切换（如通过 classList），而非直接操作 style.textDecoration。
• 示例：

  // 优化写法：通过 CSS 类控制  
  element.classList.toggle("highlight"); // 对应 CSS 类 { text-decoration: underline; }  
  

4.3 结合其他 CSS 属性

textDecoration 可与其他属性（如 textDecorationColor 和 textDecorationStyle）配合使用，实现更复杂的样式：

/* 在 CSS 中定义 */  
.highlight {  
  text-decoration: underline wavy blue;  
  text-decoration-thickness: 3px;  
}  

五、常见问题与解决方案

5.1 为什么修改后样式没有生效？

• 原因：可能存在 CSS 样式覆盖（如内联样式优先级低于外部样式表）。
• 解决方法：使用开发者工具检查元素的最终样式，或通过 !important 强制覆盖。

5.2 如何移除所有默认文本装饰？

• 方法：直接设置 textDecoration = "none"，例如：

  element.style.textDecoration = "none"; // 移除所有装饰  
  

结论

通过本文的讲解，读者应已掌握 HTML DOM Style textDecoration 属性 的核心用法、实际应用场景及注意事项。这一属性不仅是基础样式控制的工具，更是构建交互式网页的关键技术之一。建议开发者在实际项目中多加练习，结合 CSS 和 JavaScript 的优势，创造出更富表现力的网页效果。

下一步行动：尝试在你的项目中实现一个动态文本装饰效果（如点击切换“已完成”任务的删除线），并测试其在不同浏览器中的表现。通过实践，你将更深刻地理解这一属性的价值。

（字数统计：约 1800 字）