• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • attr()

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

    示例

    a:after{content:"("attr(href)")"; font-size: 12px;}
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE8以上版本的浏览器都支持attr()函数

    语法:

    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>属性值将被解析为可用于url()函数的字符串。
      相对URL是根据HTML文档的路径解析,而不是样式文件所在的路径。
      前缀与后缀空格将被截掉。
      URL about:invalid,表示资源不存在。
      integer还处于实验阶段<integer><integer>。若不是合法值(不是整数或超出CSS属性规定的数字范围),则使用默认值。前缀与后缀空格将被截掉。0,或该属性允许的最小值(如果0是不合法的值)。
      number还处于实验阶段<number><number>。若不是合法值(不是数字或超出CSS属性规定的数字范围),则使用默认值。前缀与后缀空格将被截掉。0,或该属性允许的最小值(如果0是不合法的值)。
      length还处于实验阶段是用于表示距离尺寸的 CSS 数据类型。<length>是用于表示距离尺寸的 CSS 数据类型。<length>,带单位,比如12.5em。若不是合法值(不是长度值或超出CSS属性规定的范围),则使用默认值。
      若属性值是一个相对长度,attr()会将其计算为绝对长度。
      前缀与后缀空格将被截掉。
      0,或该属性允许的最小值(如果0是不合法的值)。
      em,ex,px,rem,vw,vh,vmin,vmax,mm,cm,in,pt, or pc还处于实验阶段是用于表示距离尺寸的 CSS 数据类型。<length>

      <number>,不带单位,如12.5,并被解释为带有所规定单位的是用于表示距离尺寸的 CSS 数据类型。<length>值。若不是合法值(不是长度值或超出CSS属性规定的范围),则使用默认值。
      若属性值是一个相对长度,attr()会将其计算为绝对长度。
      前缀与后缀空格将被截掉。

      0,或该属性允许的最小值(如果0是不合法的值)。
      angle还处于实验阶段<angle><angle>,带单位,如30.5deg。若不是合法值(不是角度值或超出CSS属性规定的范围),则使用默认值。
      前缀与后缀空格将被截掉。
      0deg,或该属性允许的最小值(如果0deg是不合法的值)。
      deg,grad,rad还处于实验阶段<angle><number>,不带单位,如12.5),并被解释为带有所规定单位的<angle>值。若不是合法值(不是角度值或超出CSS属性规定的范围),则使用默认值。
      前缀与后缀空格将被截掉。
      0deg,或该属性允许的最小值(如果0deg是不合法的值)。
      time还处于实验阶段 code><time>code><time>,带单位,如30.5ms。若不是合法值(不是时间值或超出CSS属性规定的范围),则使用默认值。
      前缀与后缀空格将被截掉。
      0s,或该属性允许的最小值(如果0s是不合法的值)。
      s,ms还处于实验阶段 code><time>code><time>,不带单位,如30.5,并被解释为带有所规定单位的 code><time>值。。若不是合法值(不是时间值或超出CSS属性规定的范围),则使用默认值。
      前缀与后缀空格将被截掉。
      0s,或该属性允许的最小值(如果0s是不合法的值)。
      frequency还处于实验阶段<frequency><frequency>,带单位,如12.5kHz)。若不是合法值(不是频率值或超出CSS属性规定的范围),则使用默认值。
      前缀与后缀空格将被截掉。
      0Hz,或该属性允许的最小值(如果0Hz是不合法的值)。
      Hz,kHz还处于实验阶段<frequency><frequency>,不带单位,如12.5),并被解释为带有所规定单位的<frequency>值。若不是合法值(不是频率值或超出CSS属性规定的范围),则使用默认值。
      前缀与后缀空格将被截掉。
      0Hz,或该属性允许的最小值(如果0Hz是不合法的值)。
      %还处于实验阶段表述一个百分比值。许多 CSS 属性可以取百分比值,经常用以根据父对象来确定大小。<percentage><number>,不带单位,如12.5),并被解释为带有所规定单位的表述一个百分比值。许多 CSS 属性可以取百分比值,经常用以根据父对象来确定大小。<percentage>值。若不是合法值(不是数字或超出CSS属性规定的范围),则使用默认值。
      若属性值用作长度,attr()将其计算为绝对长度。
      前缀与后缀空格将被截掉。
      0%,或该属性允许的最小值(如果0%是不合法的值)。
    • <fallback>:如果HTML元素缺少所规定的属性值或属性值不合法,则使用<fallback>值。该值必须合法,且不能包含另一个attr()表达式。如果attr()不是所在CSS属性值的唯一值,其<fallback>值必须为<type-or-unit>所指定的类型,否则CSS会使用相应<type-or-unit>定义的默认值(见上表)。

    实例

    <!DOCTYPE html>
    <html lang="zh-cmn-hans">
    <head>
    <meta charset="utf-8"/>
    <style>
    div:after{
    	content:attr(title);
    }
    </style>
    </head>
    <body>
    <div title="在支持content属性的浏览器中能看到我被显示了"></div>
    </body>
    </html>

    效果图:

    上篇:<ident>

    下篇:text-overflow