CSS属性之attr()

attr()准确的说，不应该是一个属性，而是一个CSS的函数，我们先看看MDN上的介绍吧：

Summary

The
attr()
CSS function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can be used on pseudo-elements too and, in this case, the value of the attribute on the pseudo-element's originated element is returned.

The
attr()
function can be used with any CSS property, but support for properties other than
content
is experimental.

简单翻译下，英语水平有限，主要是给英语比我还差的朋友作参考，高手可以无视：

CSS函数attr()是用来获取被选中元素的属性值，并且在样式文件中使用。它也可以用在伪类元素里，在伪类元素里使用，它得到的是伪元素的原始元素的值。

attr()函数可以和任何CSS属性一起使用，但是除了content外，其余都还是试验性的（简单说就是不稳定，浏览器不一定支持）。

那具体怎么用呢，给大家举个栗子，前段时间刚好用到的，给按钮实现提示功能，就是鼠标放上去后，出来个小提示：

<div class="wrap"><a href="#" class="btn" data-tip="点击作答">一个按钮</a>
</div>

.btn {display: inline-block;padding: 5px 20px;border-radius: 4px;background-color: #6495ed;color: #fff;font-size: 14px;text-decoration: none;text-align: center;position: relative;
}
.btn::before {content: attr(data-tip);width: 80px;padding: 5px 10px;border-radius: 4px;background-color: #000;color: #ccc;position: absolute;top: -30px;left: 50%;transform: translate(-50%);text-align: center;opacity: 0;transition: all .3s;
}
.btn::after {content: '';border: 8px solid transparent;border-top: 8px solid #000;position: absolute;top: -3px;left: 50%;transform: translate(-50%); opacity: 0;transition: all .3s;
}
.btn:hover::before {top: -40px;opacity: 1;
}
.btn:hover::after {top: -13px;opacity: 1;
}

当然attr()还可以获取更多的其他属性，比如a标签里的href属性等，更多的用法大家自行尝试吧。

CSS属性之attr()相关推荐

第60天：js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
getComputedStyle currentStyle 获取当前元素所有最终使用的CSS属性值
object.getComputedStyle 获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象,只读,不能设置. 此方法不兼容IE8及以下,需用currentStyle方法. ...
jQuery 属性操作attr().prop().text().html().val()
这些方法用于获取和设置 DOM 元素的属性. 一.attr():  <!--属性:在元素里面写的,用attr方法操作.--& ...
css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
JS实现css属性动画效果
html代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
css 属性选择器笔记
1.基本选择器: eg: *{margin:0;padding:0}p{color:black}.content{background:red;}#intro{padding-left:2em;} 2 ...
图标选择器_【小技巧】巧用CSS属性值正则匹配选择器
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
CSS（一）：CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性；CSS选择器；尺寸和颜色单位、背景和文本设置
目录一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
DOM进阶之CSS属性操作
CSS操作属性,指的是使用JavaScript来操作一个元素的CSS样式.在JavaScript中,CSS属性操作同样有两种, 获取CSS属性值设置CSS属性值 1.获取CSS属性值语法: get ...

CSS属性之attr()

Summary

CSS属性之attr()相关推荐

最新文章

热门文章