HTML5 data-*自定义属性简单介绍
我们可以使用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
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
