Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
您的搜索结果

    attr

    概述

    CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值,并用于其样式。它也可以用于伪元素,属性值采用伪元素所依附的元素。

    attr() 表达式可以用于任何CSS属性。

    用法

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

    解释

    attribute-name
    是CSS所引用的HTML属性名称。
    <type-or-unit>
    表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法,那么attr()表达式也不合法。若省略,则默认值为string。其合法值包括:
    关键字 类型 备注 默认值
    string <string> 属性值将被解析为 <string> 空字符串
    color <color> 属性值将被解析为#xxx、#xxxxxx或关键字的形式,且必须为合法CSS <string> 值。
    前缀与后缀空格将被截掉。
    当前颜色
    url <uri></uri> 属性值将被解析为可用于url()函数的字符串。
    相对URL是根据HTML文档的路径解析,而不是样式文件所在的路径。
    前缀与后缀空格将被截掉。
    URL about:invalid,表示资源不存在。
    integer <integer> 属性值将被解析为CSS <integer>。若不是合法值(不是整数或超出CSS属性规定的数字范围),则使用默认值。
    前缀与后缀空格将被截掉。
    0,或该属性允许的最小值(如果0是不合法的值)。
    number <number> 属性值将被解析为CSS <number>。 若不是合法值(不是数字或超出CSS属性规定的数字范围),则使用默认值。
    前缀与后缀空格将被截掉。
    0,或该属性允许的最小值(如果0是不合法的值)。
    length <length> 属性值将被解析为CSS <length>,带单位,比如 12.5em。 若不是合法值(不是长度值或超出CSS属性规定的范围),则使用默认值。
    若属性值是一个相对长度, attr()会将其计算为绝对长度。
    前缀与后缀空格将被截掉。
    0,或该属性允许的最小值(如果0是不合法的值)。
    em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc <length> 属性值将被解析为CSS <number>,不带单位,如 12.5,并被解释为带有所规定单位的 <length> 值。若不是合法值(不是长度值或超出CSS属性规定的范围),则使用默认值。
    若属性值是一个相对长度, attr()会将其计算为绝对长度。
    前缀与后缀空格将被截掉。
    0,或该属性允许的最小值(如果0是不合法的值)。
    angle <angle> 属性值将被解析为CSS <angle>,带单位,如30.5deg。若不是合法值(不是角度值或超出CSS属性规定的范围),则使用默认值。
    前缀与后缀空格将被截掉。
    0deg,或该属性允许的最小值(如果0deg是不合法的值)。
    deg, grad, rad <angle> 属性值将被解析为CSS <number>,不带单位,如12.5),并被解释为带有所规定单位的 <angle> 值。若不是合法值(不是角度值或超出CSS属性规定的范围),则使用默认值。
    前缀与后缀空格将被截掉。
    0deg,或该属性允许的最小值(如果0deg是不合法的值)。
    time <time> 属性值将被解析为CSS <time>,带单位,如30.5ms。若不是合法值(不是时间值或超出CSS属性规定的范围),则使用默认值。
    前缀与后缀空格将被截掉。
    0s,或该属性允许的最小值(如果0s是不合法的值)。
    s, ms <time> 属性值将被解析为CSS <time>,不带单位,如30.5,并被解释为带有所规定单位的 <time> 值。。若不是合法值(不是时间值或超出CSS属性规定的范围),则使用默认值。
    前缀与后缀空格将被截掉。
    0s,或该属性允许的最小值(如果0s是不合法的值)。
    frequency <frequency> 属性值将被解析为CSS <frequency>,带单位,如12.5kHz)。若不是合法值(不是频率值或超出CSS属性规定的范围),则使用默认值。
    前缀与后缀空格将被截掉。
    0Hz,或该属性允许的最小值(如果0Hz是不合法的值)。
    Hz, kHz <frequency> 属性值将被解析为CSS <frequency>,不带单位,如12.5),并被解释为带有所规定单位的<frequency>值。若不是合法值(不是频率值或超出CSS属性规定的范围),则使用默认值。
    前缀与后缀空格将被截掉。
    0Hz,或该属性允许的最小值(如果0Hz是不合法的值)。
    % <percentage> 属性值将被解析为CSS <number>,不带单位,如12.5),并被解释为带有所规定单位的 <percentage>值。若不是合法值(不是数字或超出CSS属性规定的范围),则使用默认值。
    若属性值用作长度,attr()将其计算为绝对长度。
    前缀与后缀空格将被截掉。
    0%,或该属性允许的最小值(如果0%是不合法的值)。
    <fallback>
    如果HTML元素缺少所规定的属性值或属性值不合法,则使用fallback值。该值必须合法,且不能包含另一个attr()表达式。如果attr()不是所在CSS属性值的唯一值,其<fallback>值必须为<type-or-unit>所指定的类型,否则CSS会使用相应<type-or-unit>定义的默认值(见上表)。

    示例

    p:before {
        content:attr(data-foo) " ";
    }
    
    <p data-foo="hello">world</p>
    

    结果

    hello world

    规范

    规范 状态 备注
    CSS Values and Units Module Level 3
    attr()
    Candidate Recommendation 增加两个可选参数;且可以用于所有属性;且可以返回除<string>之外的其他类型。这些改变是实验性质的 ,且如果浏览器支持不足,可能在CR阶段被丢弃。
    CSS Level 2 (Revision 1)
    attr()
    Recommendation 限制用在 content 属性;且必须返回<string>}。

    浏览器支持

    特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本支持 2.0 1.0 (1.7 or earlier) 9 9.0 3.1
    用于 content之外的属性,与返回非字符串值 未实现 未实现 (参见 bug 435426) 未实现 ? ?
    特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本支持 2.1 1.0 (1.0) 8 10.0 3.1
    用于 content之外的属性,与返回非字符串值 ? 未实现 (see bug 435426) 未实现 ? ?

     

    文档标签和贡献者

    此页面的贡献者有: duXing, teoli, cuixiping, Jimmie_Felidae
    最后编辑者: duXing,