自定义属性 —— data-*

一、基本概念

 

在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

 

二、原生js中自定义属性

 

1，设置自定义属性

 

设置自定义属性有如下2种方式。

 

（1）第一种方式是可以直接在 HTML 标签上面书写：

<h2 data-weather="rain">今天天气很好</h2>

 

上面 data-weather 就是一个自定义属性，值为 rain。

在通过这个方式设置的时候需要注意的是，如果设置的自定义属性是多个单词的组合的话，需要用中横线（-）链接，比如：

<h2 data-birth-date="19940219">今天天气很好</h2>

 

 

（2）第二种方式是通过 js 的 dataset 属性来设置：

// html
<h2>今天天气很好</h2>

// js
var h2 = document.querySelector('h2');
h2.dataset.weather = "rain";

 

这样也是设置了一个 data-weater 的自定义属性，值为 rain，HTML5 中元素都会有一个dataset的属性，这是一个 DOMStringMap 类型的键值对集合。

通过这种方式设置同样需要注意，如果设置的是多个单词的组合的话，需要使用驼峰命名法来书写：

// html
<h2>今天天气很好</h2>

// js
var h2 = document.querySelector('h2');
h2.dataset.birthDate = "19940219";

 

2，js读取自定义属性

 读取的时候通过dataset属性，使用”.”来获取自定义属性，需要去掉 data- 前缀，连字符需要转化为驼峰命名：

// html（设置）
<h2 data-weather="rain" data-birth-date="19940219">今天天气很好</h2>

// js（读取）
var h2 = document.querySelector('h2');
console.log(h2.dataset.weather);   // rain
console.log(h2.dataset.birthDate);   // 19940219

 

3、css读取自定义属性

也可以通过自定义属性来书写样式：

h3[data-birth-date="19940219"]{
    color: red;
}

结果如图：

 

三、jQuery中的自定义属性

// html
<h3>今天天气很好</h3>

// js
//设置
$("h3").data({"weather":"rain", "birth-date": "19940219"});
$("h3").data("birth-date", "rain");

// 读取
console.log($("h3").data("weather"));   // rain
console.log($("h3").data("birth-date"));   // 19940219