attr()
attr() CSS函数用于检索所选择的元素的属性值，并且在样式表中使用它。它也可以用于伪元素，在这种情况下，它返回的是该伪元素的源元素上的属性值。
/* Simple usage */
attr(data-count);
attr(title);
/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);
/* With fallback */
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');注意：该attr()函数可以用于任何CSS属性，但仅支持除了实验性content以外的属性。
语法
可能值
attribute-name——是CSS中引用的HTML元素的属性名称。
<type-or-unit>——是一个关键字，表示属性值的类型或其单位，因为在HTML中，某些属性具有隐式单位。如果<type-or-unit>所作用的属性的值是无效的，则attr()表达式也将是无效的。如果省略，则默认为string。有效值的列表是：
Keyword | Associated type | Comment | Default value |
|---|---|---|---|
string | <string> | The attribute value is treated as a CSS <string>. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters. | An empty string. |
color | <color> | The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS <string> value. Leading and trailing spaces are stripped. | currentColor |
url | <url> | The attribute value is parsed as a string that is used inside a CSS url()function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped. | The url about:invalid that points to a non-existent document with a generic error condition. |
integer | <integer> | The attribute value is parsed as a CSS <integer>. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | 0, or, if 0 is not a valid value for the property, the property's minimum value. |
number | <number> | The attribute value is parsed as a CSS <number>. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | 0, or, if 0 is not a valid value for the property, the property's minimum value. |
length | <length> | The attribute value is parsed as a CSS <length> dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, attr()computes it to an absolute length. Leading and trailing spaces are stripped. | 0, or, if 0 is not a valid value for the property, the property's minimum value. |
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc | <length> | The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as a <length> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, attr()computes it to an absolute length. Leading and trailing spaces are stripped. | 0, or, if 0 is not a valid value for the property, the property's minimum value. |
angle | <angle> | The attribute value is parsed as a CSS <angle> dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | 0deg, or, if 0deg is not a valid value for the property, the property's minimum value. |
deg, grad, rad | <angle> | The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as an <angle> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | 0deg, or, if 0deg is not a valid value for the property, the property's minimum value. |
time | <time> | The attribute value is parsed as a CSS <time> dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | 0s, or, if 0s is not a valid value for the property, the property's minimum value. |
s, ms | <time> | The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as an<time> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | 0s, or, if 0s is not a valid value for the property, the property's minimum value. |
frequency | <frequency> | The attribute value is parsed as a CSS <frequency> dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used. | 0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value. |
Hz, kHz | <frequency> | The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as a <frequency> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | 0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value. |
% | <percentage> | The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as a <percentage>. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, attr()computes it to an absolute length. Leading and trailing spaces are stripped. | 0%, or, if 0% is not a valid value for the property, the property's minimum value. |
<fallback>——如果关联属性丢失或包含无效值，则使用该值。回退值（fallback）必须在attr()使用的地方有效，即使它未被使用，也不得包含其他attr()表达式。如果attr()不是属性的唯一组件值，则其<fallback>值必须是由<type-or-unit>所定义的类型。如果没有设置，CSS将使用为每个<type-or-unit>定义的默认值。
形式语法
attr( <attr-name> <type-or-unit>? [, <attr-fallback> ]? )where
<type-or-unit> = string | integer | color | url | integer | number | length | angle | time | frequency | em | ex | px | rem | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | deg | grad | rad | ms | s | Hz | kHz | %实例
HTML
<p data-foo="hello">world</p>CSS
p::before {
content: attr(data-foo) " ";
}结果
规范
Specification | Status | Comment |
|---|---|---|
CSS Values and Units Module Level 3The definition of 'attr()' in that specification. | Candidate Recommendation | Added two optional parameters; can be used on all properties; may return other values than <string>. These changes are experimental and may be dropped during the CR phase if browser support is too small. |
CSS Level 2 (Revision 1)The definition of 'attr()' in that specification. | Recommendation | Limited to the content property; always return a <string>. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 2.0 | (Yes) | 1.0 (1.7 or earlier) | 8 | 9.0 | 3.1 |
Usage in other properties than content and with non-string values | No support2 | No support | No support 1 | No support | No support | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | 1.0 (1.0) | 8 | 10.0 | 3.1 |
Usage in other properties than contentand with non-string values | ? | No support | No support 1 | No support | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
