自定义属性 Data-* - JS & jQuery Notes

jQuery操作：$(obj).data("属性名")

<div data-role="page" data-last-value="43" data-hidden="true" data-options= '{"name":"John"}' ></div>

$("div").data("role") === "page" ;         //

$("div").data("lastValue") === 43 ;        //多个连接符"-"，驼峰命名方式

$("div").data("hidden") === true ;　　　　　//取值后会自动转换类型

$("div").data("options").name === "John" ; //调用data中的JSON字符串

$("div").attr("data-hidden") === "true";   //不进行转换

<div id="tag" data-leaves="2" data-plant-height="4.3m" data-hidden="true" data-options= '{"name":"John"}' ></div>

var tag = document.getElementById("tag");

//getAttribute()取值属性
tag.getAttribute("data-leaves");
tag.getAttribute("data-plant-height"));

//setAttribute()赋值属性
tag.setAttribute("data-leaves","48");

//data-前缀属性可以在JS中通过dataset取值，更加方便
tag.dataset.leaves;
tag.dataset.plantHeight;

//赋值
tag.dataset.plantHeight = "3m";
tag.dataset.leaves--;

//新增data属性
tag.dataset.age = "100";

//删除，设置成null，或者delete
tag.dataset.leaves = null;
delete tag.dataset.age;