CSS attr() 关联dom样式新方式

MDN：developer.mozilla.org/zh-CN/docs/...

感觉attr()很有用，但是好像又没什么用，使用场景很局限，而且改变dom样式，也有其他操作方式。

CSS attr() 函数介绍

attr() CSS函数，用于从 HTML 元素的属性中获取值，并将其应用到 CSS 样式中。它允许 CSS 直接使用 HTML 属性的值，从而在不借助 JavaScript 的情况下实现动态样式调整。

---

attr() 的作用

1. 用于 content 伪元素 （最常见用法）
   attr() 最早被用于 content 属性，可以在 ::before 或 ::after 伪元素中显示元素的属性值。例如：

   <a href="https://example.com">示例链接</a>

   a::after {
       content: " (" attr(href) ")";
   }

   效果： 在链接文本后面自动显示 href 的值。

2. 应用于 CSS 样式 （现代 CSS 规范，部分浏览器支持）

   在较新的 CSS 规范中，attr() 可用于设置 CSS 其他属性，例如颜色、边框半径、宽高等。例如：

   <button data-color="red" data-radius="10px">按钮</button>

   button {
       background-color: attr(data-color color);
       border-radius: attr(data-radius length);
   }

   效果：

   • data-color="red" → 背景色变成红色
   • data-radius="10px" → 圆角半径变成 10px

3. 指定默认值（避免属性缺失导致的错误）

   button {
       border-radius: attr(data-radius length, 5px);
   }

   如果 data-radius 属性不存在，则默认使用 5px。

---

attr() 的优势

• 动态样式：让 CSS 样式能够直接使用 HTML 属性值，而不需要 JavaScript。
• 增强可维护性：减少 JavaScript 代码，使 HTML 和 CSS 之间的关系更直观。
• 更好的无障碍性 ：例如，使用 title 属性内容作为 ::after 伪元素提示信息。

---

兼容性

• content 伪元素中的 attr() ：所有主流浏览器都支持。
• CSS 样式中的 attr() （如 color、width 等）：目前支持有限，仅部分浏览器实验性支持，建议查阅最新兼容性信息。

---

总结

attr() 主要用于：

1. 在 ::before 或 ::after 伪元素中显示 HTML 属性的值（广泛支持）。
2. 在 CSS 其他属性中使用 HTML 属性的值（实验性功能，支持有限）。
3. 为 CSS 变量提供动态值，提高样式的灵活性。

尽管 attr() 在 CSS 属性中应用的支持仍在完善中，但它为前端开发提供了一种更优雅的数据驱动样式的方法，有助于提升代码的可维护性和动态性。