小编给大家分享一下html5开发中CSS属性attr()有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
属性函数attr()用于获取HTML元素里面的属性值,并用于样式中,但目前暂时只能应用于CSS元素中的伪元素。
例子
<强> 
& lt; ! DOCTYPE html>
& lt; html>
& lt;才能head>
,,,& lt; meta charset=癠TF-8",/比;
,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0“,/比;
,,,& lt; title> css attr函数& lt;/title>
,,,& lt; style>
,,,,,.tooltip {
,,,,,,,宽度:,100 px;
,,,,,,,位置:,相对;
,,,,,,,保证金:,0,汽车;
,,,,,}
,,,,,.tooltip:徘徊:after {
,,,,,,,填充:,5 px;
,,,,,,,位置:,绝对;
,,,,,,,/*,在伪元素中作为字符串中使用,*/,,,,,,,内容:,attr (data-tooltip);
,,,,,,,颜色:,# fff;
,,,,,,,背景颜色:,# 000;
,,,,,,,这个特性:,10 px;
,,,,,,,:,25 px;
,,,,,,,左:,0;
,,,,,}
,,,,,/*,箭头,*/,,,,,.tooltip: hover .arrow: after {
,,,,,,,内容:,““
,,,,,,,位置:,绝对;
,,,,,,,底部:,5 px;
,,,,,,,左:,20%;
,,,,,,,margin-left:, 5 px;
,,,,,,,,边框宽度:5 px;
,,,,,,,边框样式:,固体;
,,,,,,,边框颜色:,transparent transparent black 透明;
,,,,,}
,,,& lt;/style>
& lt;才能/head>
& lt;才能body>
,,,& lt; div data-tooltip=耙欢翁崾尽氨?
,,,,,Hover 我
,,,,,& lt; span> & lt;/span>
,,,& lt;/div>
& lt;才能/body>
& lt;/html>
语法中的实验属性(目前所有浏览器都不支持)
在新的语法中支持各种类型的CSS属性,具体支持的可查看MDN文档#规范“MDN文档“),举个例子,假如需要设置一个margin-top,正常是需要去找到类名然后设置,稍微图省事一点可能会集中书写CSS类名,然后全局引入再调用。这种写法一定程度上能方便一点,但是不够个性化,假如我要设置成上边距15 px,又得重新加一个类名,还是很麻烦。
但是如果实验属性支持的话,可以写成这样。
这种写法就很类似组件开发,不需要指定特定大小的像素值,在HTML元素上直接能指定任意大小的像素值,而且基于CSS,没有JS的参与,会更加轻巧。但是,很遗憾的是目前所有浏览器都不支持,估计很长一段时间内也是不支持的,这里做一下了解,提供一种组件开发的思路。幸运的是,在找资料的过程发现张鑫旭大佬已经探索过这种可能性,然后对这种特性做了Polyfill,查看Polyfill。
<编辑> Polyfill attr()实验属性原理利用CSS自定义属性传递attr的属性值
然后获取所有包含attr()函数的自定义的属性名
