百科狗-知识改变命运!
--

attr() - 元素的属性值 - css 文本样式

乐乐1年前 (2023-11-21)阅读数 50#技术干货
文章标签属性

attr()

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

示例

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

浏览器支持

IE8以上版本的浏览器都支持attr()函数

语法:

attr(attribute-name?[,]?)

取值

  • attribute-name:是CSS所引用的HTML属性名称。
  • 表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法,那么attr()表达式也不合法。若省略,则默认值为string。其合法值包括:
    关键字类型备注默认值
    string属性值将被解析为空字符串
    color还处于实验阶段属性值将被解析为#xxx、#xxxxxx或关键字的形式,且必须为合法CSS 值。
    前缀与后缀空格将被截掉。
    当前颜色
    url还处于实验阶段属性值将被解析为可用于url()函数的字符串。
    相对URL是根据HTML文档的路径解析,而不是样式文件所在的路径。
    前缀与后缀空格将被截掉。
    URL about:invalid,表示资源不存在。
    integer还处于实验阶段。若不是合法值(不是整数或超出CSS属性规定的数字范围),则使用默认值。前缀与后缀空格将被截掉。0,或该属性允许的最小值(如果0是不合法的值)。
    number还处于实验阶段。若不是合法值(不是数字或超出CSS属性规定的数字范围),则使用默认值。前缀与后缀空格将被截掉。0,或该属性允许的最小值(如果0是不合法的值)。
    length还处于实验阶段是用于表示距离尺寸的 CSS 数据类型。是用于表示距离尺寸的 CSS 数据类型。,带单位,比如12.5em。若不是合法值(不是长度值或超出CSS属性规定的范围),则使用默认值。
    若属性值是一个相对长度,attr()会将其计算为绝对长度。
    前缀与后缀空格将被截掉。
    0,或该属性允许的最小值(如果0是不合法的值)。
    em,ex,px,rem,vw,vh,vmin,vmax,mm,cm,in,pt, or pc还处于实验阶段是用于表示距离尺寸的 CSS 数据类型。

    attr() - 元素的属性值 - css 文本样式

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

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

实例

div:after{
	content:attr(title);
} 

效果图:

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)