文章导航

data-* 自定义属性

2018-12-4 13:17| 作者: admin| 查看: 531| 评论: 0|来自: 蚂蚁部落

之前没有关于自定义属性的规范,所以管理起来比较混乱。

HTML5增加data-*用于设置自定义属性,可以用来存储数据,也可以称之为数据属性。

同时,JavaScript提供了dataset属性用于专门管理自定义属性,

具体参阅JavaScript dataset 一章节。

语法结构:

[HTML] 纯文本查看 复制代码
<element data-*="somevalue">

自定义属性名称由两部分组成:

(1)."data-"是属性名称前缀,固定形式。

(2)."data-"后面是自定义字符串,可以认为是自定义属性的真正名称。

命名规则:

(1).数据属性要以data-开头。

(2).属性名中的字符都是小写,并且在前缀 "data-" 之后必须有至少一个字符。

(3).属性值可以是任意字符串。

浏览器支持:

(1).IE9+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
  margin:5px;
}
[data-ant]{color:red}
</style>
</head>
<body>
  <div>蚂蚁部落</div>
  <div data-ant="softwhy">蚂蚁部落</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/04/131842gddeklceloqgdcos.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).创建自定义属性data-ant,属性值为"softwhy"。

(2).然后通过属性选择器设置第二个div元素字体颜色为红色。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部