我们可以使用data-作为前缀来设置我们所需要的自定义数据属性。
使用此属性可以存放一些我们所需要的数据，代码如下:
|
1
|
<a href="javascript:" data-url="softwhy.com" data-webname="蚂蚁部落">蚂蚁部落</a>
|
上面代码中，以data-为前缀就是自定义数据属性，属性值就是存放的数据。
浏览器兼容:
（1）.IE8和IE8以上浏览器支持此属性。
（2）.谷歌浏览器支持此属性。
（3）.火狐浏览器支持此属性。
（4）.opera浏览器支持此属性。
（5）.safria浏览器支持此属性。
命名规则:
（1）.数据属性要以data-开头。
（2）.属性名中的字符都是小写，并且在前缀 "data-" 之后必须有至少一个字符。
（3）.属性值可以是任意字符串。
可以利用自定义属性进行css匹配和相关javascript操作。
使用自定义属性作为选择器代码如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>蚂蚁部落</title>
<style type="text/css">
a { display:block;
width:100px;
height:50px;
margin:10px;
text-align:center;
line-height:50px;
background:#ccc;
}a[data-webname="蚂蚁部落"] { color:red;
}</style>
</head>
<body>
<a href="javascript:" data-webname="蚂蚁部落">蚂蚁部落</a>
<a href="javascript:" data-webname="antzone">softwhy.com</a>
</body>
</html>
|
上面的代码就可以利用自定义属性进行匹配，设置元素的样式。
原文发布时间为：2017-3-2
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落