【CSS】---- attr 函数的说明和使用

Ratten
297 阅读6分钟

1. attr 介绍

  1. CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。
  2. attr() 表达式可以用于任何 CSS 属性。attr() 理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的。

2. 基本语法

property: attr(attribute-name type-or-unit, <fallback>);

3. 解释

  1. property：要设置的CSS属性，例如content、width、height等。
  2. attribute-name：要获取的HTML属性名称，例如data-*、title、href等。
  3. type-or-unit（可选）：指定返回值的类型或单位，例如string、color、px、em等。如果省略，则默认返回字符串类型。
  4. fallback：如果 HTML 元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。如果attr()不是所在 CSS 属性值的唯一值，其值必须为所指定的类型，否则 CSS 会使用相应定义的默认值。

4. type-or-unit 说明

表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string。其合法值包括：

  1. string：属性值将被解析为 string。
  2. color ：属性值将被解析为#xxx、#xxxxxx 或关键字的形式，且必须为合法 CSS string 值。前缀与后缀空格将被截掉。
  3. url ：属性值将被解析为可用于url()函数的字符串。相对 URL 是根据 HTML 文档的路径解析，而不是样式文件所在的路径。前缀与后缀空格将被截掉。
  4. integer ：属性值将被解析为 CSS integer。若不是合法值（不是整数或超出 CSS 属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。
  5. number ：属性值将被解析为 CSS number。若不是合法值（不是数字或超出 CSS 属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。
  6. length ：属性值将被解析为 CSS length，带单位，比如 12.5em。若不是合法值（不是长度值或超出 CSS 属性规定的范围），则使用默认值。若属性值是一个相对长度， attr()会将其计算为绝对长度。前缀与后缀空格将被截掉。
  7. em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc：属性值将被解析为 CSS number，不带单位，如 12.5，并被解释为带有所规定单位的 length 值。若不是合法值（不是长度值或超出 CSS 属性规定的范围），则使用默认值。若属性值是一个相对长度， attr()会将其计算为绝对长度。前缀与后缀空格将被截掉。
  8. angle ：属性值将被解析为 CSS angle，带单位，如30.5deg。若不是合法值（不是角度值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。
  9. deg, grad, rad：属性值将被解析为 CSS number，不带单位，如12.5)，并被解释为带有所规定单位的 angle 值。若不是合法值（不是角度值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。
  10. time ：属性值将被解析为 CSS time，带单位，如30.5ms。若不是合法值（不是时间值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。
  11. s, ms：属性值将被解析为 CSS time，不带单位，如30.5，并被解释为带有所规定单位的 time 值。若不是合法值（不是时间值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。
  12. frequency ：属性值将被解析为 CSS frequency，带单位，如12.5kHz)。若不是合法值（不是频率值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。
  13. Hz, kHz：属性值将被解析为 CSS frequency，不带单位，如12.5)，并被解释为带有所规定单位的frequency值。若不是合法值（不是频率值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。
  14. %：属性值将被解析为 CSS number，不带单位，如12.5)，并被解释为带有所规定单位的 percentage值。若不是合法值（不是数字或超出 CSS 属性规定的范围），则使用默认值。若属性值用作长度，attr()将其计算为绝对长度。前缀与后缀空格将被截掉。

5. 实战一：hover 提示

5.1 :hover 的提示效果

输入图片说明

5.2 实现代码

  1. DOM 结构
<div>1. 伪元素的 content 属性使用 attr 测试</div>
<div class="rui-attr-content">
    <div class="rui-attr-link" data-link="https://m.qidian.com">链接</div>
</div>

2. CSS 样式

  .rui-attr-link{
    position: relative;
  }
  .rui-attr-link::after{
    content: attr(data-link);
    position: absolute;
    top: 100%;
    left: 0;
    background: black;
    color: white;
    padding: 5px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .rui-attr-link:hover::after{
    opacity: 1;
  }

5.3 实现说明

  1. 在伪元素的 content ，使用 attr 读取元素的 data-link 属性；
  2. 然后设置伪元素的样式和动画；
  3. 在 :hover 的时候伪元素显示。

6. 实战二：排序提示

6.1 排序效果

输入图片说明

6.2 实现代码

  1. DOM 结构
  <div>2. background-image 属性使用 attr 测试</div>
  <div>
    <div data-order="1" class="rui-attr-bgimg" style="--img-url: url('./static/car5.jpg');"></div>
    <div data-order="2" class="rui-attr-bgimg" style="--img-url: url('./static/car5.jpg');"></div>
    <div data-order="3" class="rui-attr-bgimg" style="--img-url: url('./static/car5.jpg');"></div>
    <div data-order="4" class="rui-attr-bgimg" style="--img-url: url('./static/car5.jpg');"></div>
    <div data-order="5" class="rui-attr-bgimg" style="--img-url: url('./static/car5.jpg');"></div>
    <div data-order="6" class="rui-attr-bgimg" style="--img-url: url('./static/car5.jpg');"></div>
  </div>

2. CSS 样式

  .rui-attr-bgimg{
    width: 360px;
    height: 239px;
    background-image: var(--img-url);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    margin: 15px 0;
  }
  .rui-attr-bgimg:nth-child(-n+3)::after{
    content: attr(data-order);
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    text-align: center;
    color: #fff;
    background-color: #ff6600;
    border-radius: 8px;
    position: absolute;
    top: -2px;
    left: -2px;
  }

6.3 实现说明

  1. 使用伪元素的 content 属性，获取 data-order 的值进行展示；
  2. :nth-child(-n+3) 表示前几个元素展示这个伪元素；
  3. 如果排序图标很复杂，不能使用 CSS 实现，可以使用当前 CSS 里边提供的变量的方法来实现动态读取对应的图标；
  4. 使用 attr 函数的好处是不用通过 JS 判断，不用添加新的 DOM 元素，直接使用 CSS 控制那些显示，同时读取对应的内容。

7. 实战三：动态读取背景色

7.1 动态读取背景色效果

输入图片说明

7.2 DOM 结构

  <div class="rui-bg-content" data-bg="black" style="--bg-color:lime;">
    颜色应该是红色而不是绿色因为浏览器并不支持 attr() 的高级用法
  </div>

7.3 CSS 样式

  .rui-bg-content{
    background-color: red;
  }
  .rui-bg-content[data-bg]{
    background-color: var(--bg-color);
    background-color: attr(data-bg color,blue);
  }

7.4 浏览器查看代码执行

输入图片说明

8. 兼容性

输入图片说明

9. 总结

  1. 通过查看浏览器样式的渲染，可以看到 attr 函数的高级特性目前还不支持；
  2. 但是可以使用变量配合 var 函数来做兼容性解决；
  3. 不过还是期待 attr 函数的高级特性能够在各大浏览器实现，这样在 CSS 读取元素的属性就很方便。
avatar
文章
阅读
粉丝