我们可以使用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
本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落