CSS attr()
函数表达式用于获取某个元素的属性的字符串值。
例如,attr(X)
会返回指定元素的X属性的值。如果该元素没有X属性,会返回一个空的字符串。比如超链接<a>
元素有一个href
属性,通过使用content
属性结合attr()
函数,你可以获取到href
属性中指定的链接地址。下面的示例代码可以在打印文档时,将每一个超链接的地址打印在文档中。
@media print { a[href]::after { content: attr(href); } }
attr()
函数可以接收元素的任何属性值,包括 HTML5 data-* 属性。例如:
<li data-label="list-one">列表元素</li>
li::before { content: attr(data-label); color: grey; }
在CSS3中,attr()
函数被赋予了新的语法。但是这种新的语法目前还没有浏览器支持。新语法的格式如下:
attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )
其中,<attr-name>
是属性的名称,<type-or-unit>
是一个可选参数,用于告诉浏览器如何解析属性值,以及定义attr()
函数的类型。如果没有指定该属性,默认使用的类型是"String"。<attr-fallback>
代表一个回调值,用于指定的属性不存在,或者它的值不能使用指定类型进行解析,或者值无效或超出范围时提供回调。
<type-or-unit>
指定的类型可以是:‘string’, ‘color’, ‘url’, ‘integer’, ‘number’, ‘length’, ‘angle’, ‘time’或者‘frequency’。
浏览器支持
所有的现代浏览器都支持attr()
函数,包括:Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。