CSS3 函数 - attr() 函数

1. 核心知识点讲解

1.1 基本概念

attr() 函数是 CSS3 中的一个函数，用于获取元素的属性值并将其用作 CSS 属性值。它允许我们在 CSS 中直接引用元素的 HTML 属性值，从而实现更动态、更灵活的样式定义。

1.2 语法

property: attr(attribute-name [, default-value [, unit]]);

其中：

attribute-name：要获取的 HTML 属性的名称（必需）
default-value：当元素没有指定该属性时使用的默认值（可选）
unit：要添加到属性值的单位（可选）

1.3 注意事项

兼容性：attr() 函数的完整语法（包括默认值和单位参数）在一些浏览器中可能不被支持，特别是旧版本浏览器。
使用场景限制：在 CSS2.1 中，attr() 函数只能在 content 属性中使用。在 CSS3 中，它可以在更多属性中使用，但浏览器支持程度各不相同。
属性值类型：attr() 函数获取的是属性的字符串值，浏览器会尝试将其转换为适合目标 CSS 属性的类型。
性能考虑：过度使用 attr() 函数可能会影响页面性能，特别是在复杂的选择器和大量元素上使用时。

2. 实用案例分析

2.1 案例一：在 content 属性中使用

场景描述：使用 attr() 函数在 content 属性中获取元素的自定义属性值，用于生成动态内容。

CSS 代码：

data-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

data-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

HTML 代码：

<button data-tooltip="这是一个按钮">悬停查看提示</button>
<a href="#" data-tooltip="前往首页">首页链接</a>

使用效果：当用户悬停在带有 data-tooltip 属性的元素上时，会显示一个包含该属性值的工具提示。

2.2 案例二：动态设置元素宽度

场景描述：使用 attr() 函数根据元素的自定义属性值动态设置元素的宽度。

CSS 代码：

.bar {
  height: 20px;
  background-color: #4CAF50;
  margin-bottom: 10px;
  width: attr(data-width, 0, %); /* 使用 data-width 属性值作为宽度，默认值为 0% */
  transition: width 0.5s ease;
}

HTML 代码：

<div class="bar" data-width="30"></div>
<div class="bar" data-width="60"></div>
<div class="bar" data-width="90"></div>

使用效果：每个 .bar 元素的宽度会根据其 data-width 属性值设置，分别为 30%、60% 和 90%。

2.3 案例三：动态设置字体大小

场景描述：使用 attr() 函数根据元素的自定义属性值动态设置元素的字体大小。

CSS 代码：

dynamic-text {
  font-size: attr(data-size, 16, px); /* 使用 data-size 属性值作为字体大小，默认值为 16px */
}

HTML 代码：

<dynamic-text data-size="12">小字体文本</dynamic-text>
<dynamic-text data-size="16">中字体文本</dynamic-text>
<dynamic-text data-size="24">大字体文本</dynamic-text>

使用效果：每个 <dynamic-text> 元素的字体大小会根据其 data-size 属性值设置，分别为 12px、16px 和 24px。

2.4 案例四：动态设置颜色

场景描述：使用 attr() 函数根据元素的自定义属性值动态设置元素的颜色。

CSS 代码：

dynamic-color {
  color: attr(data-color, #333); /* 使用 data-color 属性值作为颜色，默认值为 #333 */
  font-size: 18px;
  font-weight: bold;
}

HTML 代码：

<dynamic-color data-color="#ff0000">红色文本</dynamic-color>
<dynamic-color data-color="#00ff00">绿色文本</dynamic-color>
<dynamic-color data-color="#0000ff">蓝色文本</dynamic-color>

使用效果：每个 <dynamic-color> 元素的颜色会根据其 data-color 属性值设置，分别为红色、绿色和蓝色。

2.5 案例五：结合伪元素使用

场景描述：使用 attr() 函数结合伪元素创建动态内容。

CSS 代码：

.product {
  position: relative;
  padding: 20px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}

.product::before {
  content: attr(data-name);
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.product::after {
  content: '价格: ¥' attr(data-price);
  font-size: 16px;
  color: #ff0000;
  display: block;
  margin-top: 10px;
}

HTML 代码：

<div class="product" data-name="产品 A" data-price="100"></div>
<div class="product" data-name="产品 B" data-price="200"></div>
<div class="product" data-name="产品 C" data-price="300"></div>

使用效果：每个 .product 元素会显示其 data-name 属性值作为产品名称，显示其 data-price 属性值作为产品价格。

3. 代码示例

3.1 基础使用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>attr() 函数基础示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    /* 基础使用：在 content 属性中使用 */
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: help;
      border-bottom: 1px dotted #333;
    }
    
    .tooltip::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background-color: #333;
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }
    
    .tooltip:hover::after {
      opacity: 1;
      visibility: visible;
    }
    
    /* 动态设置宽度 */
    .progress-bar {
      height: 20px;
      background-color: #4CAF50;
      margin-bottom: 10px;
      width: attr(data-percent, 0, %);
      transition: width 0.5s ease;
    }
    
    /* 动态设置字体大小 */
    .text-size {
      font-size: attr(data-size, 16, px);
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>attr() 函数基础示例</h1>
  
  <h2>1. 工具提示示例</h2>
  <p>将鼠标悬停在以下文本上查看工具提示：</p>
  <p>这是一个 <span class="tooltip" data-tooltip="这是一个工具提示示例">带工具提示的文本</span>，
  这是另一个 <span class="tooltip" data-tooltip="这是另一个工具提示">带不同工具提示的文本</span>。</p>
  
  <h2>2. 进度条示例</h2>
  <p>以下是使用 attr() 函数设置宽度的进度条：</p>
  <div class="progress-bar" data-percent="30"></div>
  <div class="progress-bar" data-percent="60"></div>
  <div class="progress-bar" data-percent="90"></div>
  
  <h2>3. 动态字体大小示例</h2>
  <p>以下是使用 attr() 函数设置字体大小的文本：</p>
  <div class="text-size" data-size="12">小字体文本（12px）</div>
  <div class="text-size" data-size="16">中字体文本（16px）</div>
  <div class="text-size" data-size="24">大字体文本（24px）</div>
</body>
</html>

3.2 高级使用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>attr() 函数高级示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    /* 产品卡片示例 */
    .product-card {
      position: relative;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 20px;
      max-width: 300px;
    }
    
    .product-card::before {
      content: attr(data-name);
      font-size: 18px;
      font-weight: bold;
      display: block;
      margin-bottom: 10px;
      color: #333;
    }
    
    .product-card::after {
      content: '价格: ¥' attr(data-price);
      font-size: 16px;
      color: #ff0000;
      display: block;
      margin-top: 10px;
      font-weight: bold;
    }
    
    .product-card .description {
      color: #666;
      margin: 10px 0;
    }
    
    /* 动态颜色示例 */
    .color-box {
      width: 100px;
      height: 100px;
      margin: 10px;
      display: inline-block;
      border: 1px solid #ddd;
      background-color: attr(data-color, #f0f0f0);
    }
    
    /* 动态边框示例 */
    .border-example {
      padding: 10px;
      margin: 10px 0;
      border: attr(data-border-width, 1, px) solid attr(data-border-color, #333);
    }
  </style>
</head>
<body>
  <h1>attr() 函数高级示例</h1>
  
  <h2>1. 产品卡片示例</h2>
  <div class="product-card" data-name="产品 A" data-price="100">
    <div class="description">这是产品 A 的描述信息，使用 attr() 函数显示产品名称和价格。</div>
  </div>
  
  <div class="product-card" data-name="产品 B" data-price="200">
    <div class="description">这是产品 B 的描述信息，使用 attr() 函数显示产品名称和价格。</div>
  </div>
  
  <h2>2. 动态颜色示例</h2>
  <p>以下是使用 attr() 函数设置背景颜色的盒子：</p>
  <div class="color-box" data-color="#ff0000"></div>
  <div class="color-box" data-color="#00ff00"></div>
  <div class="color-box" data-color="#0000ff"></div>
  <div class="color-box" data-color="#ffff00"></div>
  <div class="color-box" data-color="#ff00ff"></div>
  <div class="color-box"></div> <!-- 没有 data-color 属性，使用默认值 -->
  
  <h2>3. 动态边框示例</h2>
  <p>以下是使用 attr() 函数设置边框的元素：</p>
  <div class="border-example" data-border-width="2" data-border-color="#ff0000">
    2px 红色边框
  </div>
  <div class="border-example" data-border-width="4" data-border-color="#00ff00">
    4px 绿色边框
  </div>
  <div class="border-example">
    默认边框（1px 黑色）
  </div>
</body>
</html>

4. 总结

4.1 主要知识点回顾

attr() 函数的基本语法：property: attr(attribute-name [, default-value [, unit]]);
参数含义：attribute-name（要获取的属性名）、default-value（默认值）、unit（单位）
使用场景：在 content 属性中生成动态内容、动态设置元素宽度、动态设置字体大小、动态设置颜色、结合伪元素使用等
注意事项：浏览器兼容性差异、使用场景限制、属性值类型转换、性能考虑

4.2 实用价值

attr() 函数为 CSS 带来了更动态、更灵活的能力，使得我们可以：

在 CSS 中直接引用元素的 HTML 属性值，减少 JavaScript 的使用
创建更具语义的 HTML 结构，将数据与表现分离
实现更动态的样式效果，如工具提示、进度条等
减少代码冗余，提高代码的可维护性

4.3 最佳实践

**合理使用 attr()**：只在适合的场景中使用 attr() 函数，避免过度使用影响性能。
提供默认值：当使用 attr() 函数时，考虑提供默认值以确保在元素没有指定属性时也能正常显示。
注意浏览器兼容性：在使用 attr() 函数时，考虑浏览器兼容性，特别是在旧版本浏览器中。
结合 JavaScript：在需要更复杂的动态效果时，考虑结合 JavaScript 使用 attr() 函数。
性能优化：在大量元素上使用 attr() 函数时，注意性能优化，避免过度计算。

通过掌握 attr() 函数的使用方法，我们可以编写更灵活、更动态的 CSS 代码，为用户提供更好的视觉体验。