CSS attr() 函数（长文讲解）

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

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

前言

在 CSS 开发中，开发者常常需要将 HTML 内容动态映射到样式设计中。例如，根据页面中的文本生成动态标题、根据数据属性显示状态提示，或是将用户输入内容直接渲染到样式层。此时，CSS attr() 函数便成为了一个强大的工具。它能够将 HTML 元素的属性值（如 title、data-*）转换为 CSS 值，从而实现内容与样式的无缝衔接。本文将从基础概念、核心用法、实际案例和高级技巧四个方面，深入解析 CSS attr() 函数的原理与应用。

什么是 attr() 函数？

attr() 是 CSS 中用于获取元素属性值的函数。其语法为：

attr( <attr-name> , <type> )

其中：

• <attr-name> 是要获取的 HTML 属性名称（如 title、data-xxx）。
• <type> 是可选参数，用于指定属性值的类型（如 string、number）。

形象比喻：
可以把 attr() 看作一座桥梁，连接着 HTML 内容与 CSS 样式。它允许开发者将 HTML 中的静态数据“搬运”到 CSS 属性中，从而实现动态化的视觉效果。

基础用法：从简单示例入手

1. 获取基础属性值

假设 HTML 中有一个带有 title 属性的按钮：

<button title="点击我！">按钮</button>

可以通过 CSS 将 title 的值直接显示为按钮的悬停提示：

button:hover::after {
  content: attr(title);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
}

此时，当用户悬停按钮时，会看到与 title 内容一致的提示框。

2. 使用 data-* 自定义属性

开发者更常用 data-* 属性来存储动态数据。例如：

<div class="card" data-author="张三">  
  <h3>文章标题</h3>  
</div>  

通过 CSS 可以直接引用 data-author 的值：

.card::before {
  content: "作者：" attr(data-author);
  display: block;
  margin-bottom: 10px;
}

这样，无需 JavaScript 即可动态生成作者信息。

进阶技巧：伪元素与动态内容的结合

1. 伪元素的协同作用

attr() 函数常与 ::before、::after 伪元素配合，实现内容的动态插入。例如，创建一个动态的进度条标签：

<div class="progress-bar" data-progress="75%"></div>

.progress-bar {
  width: calc(attr(data-progress, string));
  background: linear-gradient(to right, #4CAF50 var(--progress), #eee 0);
  position: relative;
}

.progress-bar::after {
  content: attr(data-progress);
  position: absolute;
  right: 10px;
  color: white;
}

此时，data-progress 的值会同时影响进度条宽度和文本显示，形成数据与样式的一致性。

2. 类型转换与单位处理

attr() 的第二个参数 <type> 可以指定属性值的类型。例如，若 data-width 的值为字符串 "200"，需显式声明为数字类型才能参与计算：

.box {
  width: calc(attr(data-width, number) * 1px);
  /* 等价于 width: 200px */
}

若忽略类型声明，某些浏览器可能将字符串直接拼接，导致 width: "200px" 的语法错误。

实战案例：常见场景的应用

案例 1：动态生成表单标签

传统表单标签需要为每个输入框单独编写文本，但使用 attr() 可简化代码：

<input type="text" placeholder="用户名" data-label="用户名" required>

input::placeholder {
  color: transparent; /* 隐藏原占位符 */
}

input:focus::placeholder,
input:not(:placeholder-shown)::placeholder {
  content: attr(data-label);
  color: #666;
  padding: 0 8px;
  background: white;
  transition: all 0.3s;
}

当用户聚焦输入框时，data-label 的值会动态显示为占位符，提升交互体验。

案例 2：动态按钮状态提示

创建一个根据 data-state 属性变化的按钮：

<button data-state="加载中..." disabled>提交</button>

button[disabled] {
  background: #ddd;
  padding-right: 24px;
  position: relative;
}

button[disabled]::after {
  content: attr(data-state);
  position: absolute;
  right: 6px;
  color: #666;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

当按钮处于禁用状态时，会显示旋转动画和 data-state 的文本，增强反馈效果。

兼容性与注意事项

1. 浏览器支持

attr() 函数在现代浏览器中已广泛支持，但需注意：

• IE 和 Edge Legacy 不支持此功能。
• 部分旧版浏览器（如 Safari 9 以下）可能需要通过 JavaScript 补丁实现兼容。

2. 安全与限制

• attr() 返回的字符串会自动包裹在引号中，若需避免，可结合 content: attr(data-text) !important; 覆盖默认行为。
• 无法直接将属性值用于非字符串类型属性（如 color、background），需通过 calc() 或 JavaScript 转换。

3. 性能优化

频繁使用 attr() 可能增加渲染开销，建议：

• 对静态内容优先使用内联样式。
• 复杂场景结合 JavaScript 动态生成类名，避免过度依赖 CSS。

结论

CSS attr() 函数通过将 HTML 属性与 CSS 值直接关联，为开发者提供了内容与样式动态绑定的便捷方案。它在表单交互、动态提示、数据可视化等领域展现出强大潜力，尤其适合需要减少 JavaScript 依赖的场景。

掌握 attr() 的核心语法与进阶用法，能够显著提升代码的灵活性与可维护性。建议读者通过实际项目逐步探索其可能性，例如尝试将用户输入的 data- 属性值映射到动画参数、进度条数值等场景。随着 CSS 模块化和动态化趋势的演进，attr() 函数必将成为前端开发者工具箱中的重要一环。

提示：若需进一步学习，可结合 CSS 变量与 attr() 实现更复杂的交互逻辑，例如动态生成可计算的渐变色或响应式布局参数。