CSS获取属性值函数--attr()函数的定义和使用

attr()函数为CSS返回元素属性值函数

一、attr()函数的语法

attr( attribute-name <type-or-unit>? [, <fallback> ]? )

该函数接收一个单一参数：attribute-name，即属性名，attr()函数返回被选择元素的HTML属性值，可以应用于被选择的元素，也可应用于该元素的伪元素。参数需为HTML中的属性名。

理论上attr()函数可以应用于所有的CSS属性，但实际上目前仅支持content属性，其他的属性尚属于实验性质的，因此，如果你在代码中如果给width等属性使用attr()函数设置值，会无效甚至出现报错。

示例：

HTML代码：

<a href="https://www.qietujiang.com"></a>

CSS代码：

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

二、attr()函数使用时的注意点：

1、attr()函数的参数不用括号包裹；

2、作为attr()参数的属性是选中元素的HTML属性；

3、目前仅支持content属性；

更详细的介绍大家可以查看火狐MDN。

• - - - - - - - -

更多CSS函数的介绍和使用，请移步查看：《CSS函数使用详解》