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">
<meta name="author" content="http://www.softwhy.com/" />
<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

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:HTML5 data-*自定义属性简单介绍

上一篇:PERT图事件、活动、松弛时间与关键路径的相关计算


下一篇:redis组件介绍