attr()函数主要用于在CSS的content属性中动态插入HTML属性值，典型场景包括打印样式中显示链接URL、提升可访问性、开发调试及创建轻量级工具提示。其语法为attr(attribute-name )，支持获取任意HTML属性（如href、data-*、alt等），但目前主要局限于content属性使用，因浏览器对非content属性的attr()支持有限，且属性值多被当作字符串处理，难以直接用于width、color等需数值或颜色类型的CSS属性。此外，CSS自定义属性（CSS Variables）结合JavaScript已成为更灵活的替代方案，能实现跨属性动态样式控制。因此，attr()最适用场景为伪元素中展示元数据，而在复杂动态样式需求下，推荐使用CSS变量或JavaScript操作DOM。
CSS中的
attr()函数，简单来说，就是让你能在样式规则里直接引用HTML元素的某个属性值。它能把HTML标签上的任何属性（比如
title、
data-*自定义属性，甚至是
href）动态地“拉”到CSS里来用，最常见的应用场景就是结合
content属性，在伪元素中显示这些属性值。
解决方案
说起
attr()，我个人觉得它在某些特定场景下简直是神来之笔，特别是在需要把一些非样式信息，但又与内容紧密相关的数据展示出来时。它的基本语法是
attr(attribute-name。)
attribute-name是必填的，就是你要获取的HTML属性名；
是可选的，用来指定属性值的类型，比如
string、
url、
color、
integer等，但说实话，目前浏览器对
type的支持还比较有限，通常默认都是按
string处理；
也是可选的，当指定的属性不存在或值无效时，提供一个备用值。
最典型的用法，就是配合伪元素
::before或
::after的
content属性。想象一下，你有一堆链接，你想在链接后面自动显示它的
href地址，或者一个图片的
alt文本。以前这可能得靠JavaScript，但有了
attr()，CSS就能搞定：
立即学习“前端免费学习笔记（深入）”；
访问示例网站 @@##@@
a::after {
content: " (" attr(href) ")"; /* 在链接后显示href */
font-size: 0.8em;
color: #888;
}
img::after {
content: attr(data-caption); /* 显示data-caption属性值 */
display: block;
text-align: center;
margin-top: 5px;
font-style: italic;
color: #555;
}你看，这样就直接把HTML里的信息搬到了CSS控制的显示区域，非常直观。我经常用它来做一些小的提示信息或者调试辅助，比如显示元素的
id或
class，在开发阶段这能省不少事。
当然，除了
content，理论上
attr()也可以用于其他CSS属性，比如
width、
height、
color、
background-color等。但实际上，目前浏览器对
attr()用在非
content属性上的支持非常有限，或者说，它只能将属性值当作字符串来处理，而不是真正的数值或颜色值。这意味着你不能直接写
width: attr(data-width)，然后指望
data-width="100px"能直接生效。如果
data-width是
100，它会被当成
width: "100"这个字符串，这显然不是我们想要的。所以，目前它的核心价值，几乎都集中在
content属性上。
attr()函数在哪些场景下最能发挥作用？
在我看来，
attr()函数最能大放异彩的场景，主要集中在那些需要“显示元数据”或“动态生成文本内容”的地方。这不仅仅是简单的展示，更多的是提升用户体验和内容的可访问性。
首先，打印样式表。这是一个非常经典的用例。当网页被打印出来时，我们可能希望显示一些在屏幕上通常隐藏的信息，比如链接的完整URL。在打印样式中，通过
a::after { content: " (" attr(href) ")"; }，用户在纸质版上也能知道每个链接会导向哪里，这对于文档的完整性和可读性至关重要。
其次，可访问性增强。虽然
attr()本身不能直接改善屏幕阅读器对内容的理解，但它可以辅助视觉用户获取额外信息。比如，为带有图标的按钮显示其
aria-label内容，或者在图片下方显示其
alt文本作为辅助说明，这在某些设计中可以避免重复的HTML结构。
.icon-btn::after {
content: attr(aria-label); /* 在视觉上显示按钮的用途 */
margin-left: 5px;
font-size: 0.9em;
color: #666;
}再次，调试和开发辅助。在开发阶段，我有时会用
attr()来快速检查某些元素的属性值。比如，想知道某个组件的
data-id或
data-status是什么，而不想每次都去DevTools里查看，就可以临时加一条CSS规则：
[data-id]::before { content: "ID: " attr(data-id); position: absolute; top: 0; left: 0; background: yellow; }。这能大大提高调试效率，虽然这通常是临时性的。
最后，自定义工具提示或徽章。虽然现代CSS有更强大的
data-*属性结合JavaScript或纯CSS
:hover来做工具提示，但
attr()依然可以作为一种轻量级的方式，在伪元素中显示
data-tooltip或
data-badge属性的内容，而无需额外的HTML元素。
消息[data-badge]::after {
content: attr(data-badge);
background-color: red;
color: white;
padding: 2px 5px;
border-radius: 3px;
margin-left: 5px;
font-size: 0.7em;
vertical-align: super;
}这些场景都充分利用了
attr()能从HTML中提取字符串并插入到
content属性中的能力，避免了冗余的HTML标记，让样式和内容更好地分离。
attr()函数存在哪些局限性或兼容性问题？
尽管
attr()函数在特定场景下表现出色，但它并非没有局限性，甚至可以说，它的局限性是相当明显的，这导致它在CSS中的应用范围远不如我们想象的那么广阔。
最大的问题在于，它主要被限制在content
属性中使用。如前所述，虽然CSS规范理论上允许
attr()用在其他CSS属性上，比如
width、
height、
color等，但目前浏览器（直到CSS Value and Units Module Level 4的草案阶段，情况才有所改善，但普及度仍不高）对这种用法支持非常差，或者说，它只会将属性值当作一个字符串来处理，而不是一个实际的CSS数值、颜色、URL等类型。
举个例子，如果你有一个
div，上面有
data-width="100px"，你尝试
div { width: attr(data-width); }，浏览器通常不会将其解析为width: 100px;，而是
width: "100px";，这在CSS属性值解析时是无效的。这极大地限制了
attr()的实用性，使其无法实现更复杂的动态样式控制。
其次，类型支持和回退机制的限制。虽然规范中定义了
attr(attribute-name的语法，允许指定类型（如)
px,
em,
rem,
deg,
url,
color,
integer,
number等）和回退值，但实际的浏览器实现对这些类型和回退的支持程度参差不齐，且很多时候仍然默认按
string处理。这意味着你不能完全依赖这些高级特性来确保样式行为。
再者，性能考量。虽然通常情况下，
attr()对性能的影响微乎其微，但在大规模、频繁地使用，尤其是在伪元素中生成大量内容时，可能会对渲染性能造成轻微影响。不过，这通常不是我们日常开发中需要过度担忧的问题，除非你遇到了具体的性能瓶颈。
最后，CSS自定义属性（CSS Variables）的崛起。CSS自定义属性（
--my-variable: value;）提供了比
attr()更强大、更灵活的动态样式控制能力。自定义属性可以直接在CSS中定义和修改，并且可以通过JavaScript轻松操作，它们的值可以直接用于各种CSS属性，而不会被当作字符串。这使得很多过去可能考虑使用
attr()的场景，现在有了更好的替代方案。
/* 使用CSS自定义属性 */
:root {
--my-width: 100px;
}
div {
width: var(--my-width);
}
/* 可以通过JS动态修改：document.documentElement.style.setProperty('--my-width', '200px'); */综上所述，
attr()函数在作为
content属性的补充时非常有用，但在其他CSS属性上的应用，由于其字符串处理的本质和浏览器支持的限制，使其显得力不从心。
除了attr()，还有哪些CSS或JavaScript方法可以实现类似效果？
当我们需要从HTML属性中获取值并用于样式或内容时，除了
attr()，我们还有几种更灵活、更强大的替代方案，尤其是在
attr()的局限性显现时。
1. CSS自定义属性（CSS Variables）
这绝对是首选的现代CSS解决方案。虽然它不能直接从HTML属性中“读取”值，但它提供了一个非常强大的机制，通过JavaScript将HTML属性值传递给CSS。
-
实现方式：
- 在HTML元素上定义
data-*
属性。 - 使用JavaScript读取这些
data-*
属性的值。 - 通过JavaScript将这些值设置为CSS自定义属性。
- 在CSS中使用
var()
函数引用这些自定义属性。
- 在HTML元素上定义
优点： 极度灵活，可以用于任何CSS属性，支持数值、颜色、字符串等多种类型，并且可以通过JavaScript动态修改，实现复杂的交互效果。
-
示例：
.box { width: var(--box-size); height: var(--box-size); background-color: var(--box-color); }document.querySelectorAll('.box').forEach(box => { const color = box.dataset.color; const size = box.dataset.size; box.style.setProperty('--box-color', color); box.style.setProperty('--box-size', size); });
2. JavaScript直接操作DOM样式
这是最直接、最传统的做法。通过JavaScript获取HTML元素的属性值，然后直接修改元素的
style属性或添加/移除CSS类。
-
实现方式：
- 使用
element.getAttribute('attribute-name')或element.dataset.propertyName
获取属性值。 - 使用
element.style.propertyName = value
直接设置样式。 - 或者，根据属性值动态添加/移除类，让CSS类来控制样式。
- 使用
优点： 兼容性最好，功能强大，可以实现任何复杂的逻辑和样式控制。
缺点： 可能会导致样式和行为的紧密耦合，如果过度使用内联样式，不利于CSS的维护。
-
示例：
操作失败！
.status-error { color: red; font-weight: bold; } .status-success { color: green; }const messageElement = document.getElementById('message'); const status = messageElement.dataset.status; // 获取data-status if (status === 'error') { messageElement.classList.add('status-error'); // 也可以直接设置内容 messageElement.textContent = messageElement.getAttribute('data-status-text') || '发生错误。'; } // 或者直接设置内联样式 // messageElement.style.color = 'red';
3. CSS伪类和选择器（间接方式）
在某些特定场景下，我们可能不需要直接获取属性值，而是根据属性的存在与否或其特定值来应用样式。
实现方式： 使用属性选择器
[attribute]
、[attribute="value"]
、[attribute^="value"]
等。优点： 纯CSS实现，性能好，语义化。
缺点： 只能根据属性本身来选择元素并应用预设样式，无法动态地将属性值作为CSS属性值使用。
-
示例：
button[disabled] { opacity: 0.5; cursor: not-allowed; } input[required] { border-color: orange; }
总的来说，
attr()在
content属性上的应用依然有其便利性，但在需要更复杂、更动态的样式控制时，CSS自定义属性结合JavaScript是更现代、更强大的解决方案，而纯JavaScript操作DOM样式则提供了最大的灵活性和兼容性。选择哪种方法，取决于具体的场景需求和项目的复杂程度。
